定位
使用这些速记实用程序快速配置元素的位置。
位置值
可以使用快速定位类,但它们没有响应。
<div class="position-static">...</div> <div class="position-relative">...</div> <div class="position-absolute">...</div> <div class="position-fixed">...</div> <div class="position-sticky">...</div>
排列元素
使用边缘定位实用程序轻松排列元素。格式为 {property}-{position}
。
财产是以下之一:
top
- 垂直顶部位置start
- 水平左侧位置(在 LTR 中)bottom
- 用于垂直底部位置end
- 用于水平右侧位置(在 LTR 中)
其中位置是以下之一:
0
- 用于 0 边缘位置50
- 50% 边缘位置100
- 100% 边缘位置
<div class="position-relative"> <div class="position-absolute top-0 start-0"></div> <div class="position-absolute top-0 end-0"></div> <div class="position-absolute top-50 start-50"></div> <div class="position-absolute bottom-50 end-50"></div> <div class="position-absolute bottom-0 start-0"></div> <div class="position-absolute bottom-0 end-0"></div> </div>
中心元素
此外,您还可以使用转换实用程序类 .translate-middle
使元素居中。
此类将转换 translateX(-50%)
和 translateY(-50%)
应用于元素,结合边缘定位实用程序,允许您绝对居中元素。
<div class="position-relative"> <div class="position-absolute top-0 start-0 translate-middle"></div> <div class="position-absolute top-0 start-50 translate-middle"></div> <div class="position-absolute top-0 start-100 translate-middle"></div> <div class="position-absolute top-50 start-0 translate-middle"></div> <div class="position-absolute top-50 start-50 translate-middle"></div> <div class="position-absolute top-50 start-100 translate-middle"></div> <div class="position-absolute top-100 start-0 translate-middle"></div> <div class="position-absolute top-100 start-50 translate-middle"></div> <div class="position-absolute top-100 start-100 translate-middle"></div> </div>
通过添加 .translate-middle-x
或 .translate-middle-y
类,元素只能在水平或垂直方向定位。
<div class="position-relative"> <div class="position-absolute top-0 start-0"></div> <div class="position-absolute top-0 start-50 translate-middle-x"></div> <div class="position-absolute top-0 end-0"></div> <div class="position-absolute top-50 start-0 translate-middle-y"></div> <div class="position-absolute top-50 start-50 translate-middle"></div> <div class="position-absolute top-50 end-0 translate-middle-y"></div> <div class="position-absolute bottom-0 start-0"></div> <div class="position-absolute bottom-0 start-50 translate-middle-x"></div> <div class="position-absolute bottom-0 end-0"></div> </div>
例子
以下是这些类的一些真实示例:
<button type="button" class="btn btn-primary position-relative"> 邮件 <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">未读邮件</span></span> </button> <button type="button" class="btn btn-dark position-relative"> 标记 <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> </button> <button type="button" class="btn btn-primary position-relative"> 提醒 <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">未读邮件</span></span> </button>
您可以将这些类与现有组件一起使用来创建新组件。请记住,您可以通过向 $position-values
变量添加条目来扩展其功能。
<div class="position-relative m-4"> <div class="progress" style="height: 1px;"> <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button> <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button> <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button> </div>