Bootstrap5 位置(Position)

半兽人 发表于: 2020-07-17   最后更新时间: 2020-07-17 22:52:00  
{{totalSubscript}} 订阅, 3,042 游览

固定顶部

从一个边缘到另一个边缘,将一个元素固定到窗口的顶部。确保您了解项目中固定位置的影响;只需要添加以下CSS即可。

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

固定底部

将元素固定在底部。

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

粘性顶部

将元素定位在窗口的顶部,但只会在你滚动过去之后才可以。.sticky-top是使用了CSS的position.sticky-top

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

响应式粘顶(Responsive sticky top)

.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>
更新于 2020-07-17

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章