位置助手

使用位置助手快速配置元素的位置。

内容提要

固定在顶部

将元素边到边地定位在视口的顶部。确保您了解项目中固定位置的影响；您需要编写类似下面的 CSS。

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

固定在底部

从边到边将元素放置在视口底部。确保您了解项目中固定位置的影响；您需要编写类似下面的 CSS。

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

粘在顶部

只有在您滚动经过它之后，将一个元素定位在视口的顶部。 .sticky-top 实用程序使用 CSS 的 position:sticky，并非所有浏览器都完全支持。

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

响应式粘在顶部

.sticky-top 实用程序也存在响应式变体。

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>