Bootstrap5 位置(Position)

半兽人 发表于: 2020-07-17   最后更新时间: 2020-07-17  

固定顶部

从一个边缘到另一个边缘,将一个元素固定到窗口的顶部。确保您了解项目中固定位置的影响;只需要添加以下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>


您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Bootstrap5 嵌入(Embeds)
下一条: Bootstrap5 屏幕阅读器(Screen readers)