Skip to main content Skip to docs navigation

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

固定在顶部

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

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

固定在底部

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

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

黏着在顶部

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

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