Skip to main content Skip to docs navigation
View on GitHub

Position (位置)

使用這些輔助器可以快速配置元素的位置。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去
On this page

固定頂端

將元素固定在螢幕的頂端，邊緣相接。確保您了解專案中使用 fixed 定位的結果，可能會需要添加其他 CSS。

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

固定底部

將元素固定在螢幕的底部，邊緣相接。確保您了解專案中使用 fixed 定位的結果，可能會需要添加其他 CSS。

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

Sticky top

將元素固定在螢幕的底部，邊緣相接。但只有在滾動離開該元素之後才會執行。 .sticky-top 通用類別使用 CSS 的 position: sticky，並非所有瀏覽器都完全支持。

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