Bootstrap定位

Bootstrap中，定位工具类用于快速设置元素的位置。这些类可以帮助轻松地将元素定位到页面上的任何位置，而无需编写复杂的CSS代码。可以通过将这些类应用到HTML元素上，轻松实现元素的定位和布局。

一、定位工具类

以下是一些常用的定位工具类：

1、.position-static：将元素设置为静态定位，即元素保持其在文档流中的默认位置。

2、.position-relative：将元素设置为相对定位，使其相对于其正常位置进行定位调整。

3、.position-absolute：将元素设置为绝对定位，使其相对于最近的非静态定位祖先元素进行定位。

4、.position-fixed：将元素设置为固定定位，使其相对于视口进行定位，即无论页面滚动与否，元素都会固定在屏幕上的位置。

5、.fixed-top：将元素固定在页面顶部。

6、.fixed-bottom：将元素固定在页面底部。

7、.sticky-top：将元素在页面滚动时固定在顶部位置。

可以通过将这些类应用到HTML元素上，轻松实现元素的定位和布局。例如，要将一个元素固定在页面顶部，可以这样写：

<div class="fixed-top">
<!-- 放置要固定在页面顶部的内容 -->
</div>

二、排列元素

可以使用边界定位通用类别轻松的排列元素。格式为{property}-{position}。

其中，property为以下的其中一种：

• top - 用于垂直定位top
• start - 用于水平定位left（LTR）
• bottom - 用于垂直定位bottom
• end - 用于水平定位right（LTR）

其中，position为以下的其中一种：

• 0 - 用于0的边界定位
• 50 - 用于50%的边界定位
• 100 - 用于100%的边界定位

（你可以透过在$position-values Sass map变数添加实体，以增加更多定位值。）

<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将元素置中。

此类别将transform之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">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-dark position-relative">
Marker <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">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</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="25" 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>