定位

利用这些工具类快速设置元素的位置。

常用的类（class）

Bootstrap 提供了一组用于为元素快速定位的类，但是不支持响应式布局。

<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>

固定在顶部

将一个元素固定在视口（viewport）的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。

<div class="fixed-top">...</div>

固定在底部

将一个元素固定在视口（viewport）的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。

<div class="fixed-bottom">...</div>

黏着在顶部

当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。.sticky-top 工具类利用的是 CSS 的 position: sticky 属性，并非所有浏览器都支持该属性。

IE11 和 IE10 会将 position: sticky 渲染为 position: relative。 因此，我们将该样式包裹在 @supports 查询内，从而只在支持该属性的浏览器中应用此样式。

<div class="sticky-top">...</div>