利用这些工具类快速设置元素的位置。
On this page
固定（fixed）在顶部
将一个元素固定在视口（viewport）的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
<div class="fixed-top">...</div>
固定（fixed）在底部
将一个元素固定在视口（viewport）的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
<div class="fixed-bottom">...</div>
黏着（sticky）在顶部
当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。
<div class="sticky-top">...</div>
黏着在顶部的功能也支持响应式布局
.sticky-top 工具类针对响应式布局提供了相应的变种。
<div class="sticky-sm-top">当视口（viewport）是 SM (small) 或更宽的尺寸时，黏着在视口（viewport）的顶部</div>
<div class="sticky-md-top">当视口（viewport）是 MD (medium) 或更宽的尺寸时，黏着在视口（viewport）的顶部</div>
<div class="sticky-lg-top">当视口（viewport）是 LG (large) 或更宽的尺寸时，黏着在视口（viewport）的顶部</div>
<div class="sticky-xl-top">当视口（viewport）是 XL (extra-large) 或更宽的尺寸时，黏着在视口（viewport）的顶部</div>
<div class="sticky-xxl-top">当视口（viewport）是 XXL (extra-extra-large) 或更宽的尺寸时，黏着在视口（viewport）的顶部</div>
黏着（sticky）在底部
Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it.
<div class="sticky-bottom">...</div>
Responsive sticky bottom
Responsive variations also exist for .sticky-bottom utility.
<div class="sticky-sm-bottom">当视口（viewport）是 SM (small) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-md-bottom">当视口（viewport）是 MD (medium) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-lg-bottom">当视口（viewport）是 LG (large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-xl-bottom">当视口（viewport）是 XL (extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
<div class="sticky-xxl-bottom">当视口（viewport）是 XXL (extra-extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>