View on GitHub

溢出 (Overflow)

使用這些速記的通用類別快速配置內容溢出元素的方式。

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

立即上課去

使用四個預設的值與類別，即時的調整 overflow 屬性。預設情況下這些類別並非響應式的。

這個範例在本身就具有寬高的元素上設定 .overflow-auto。透過設計，此內容將會垂直滾動。

這個範例在本身就具有寬高的元素上設定 .overflow-hidden。

這個範例在本身就具有寬高的元素上設定 .overflow-visible。

這個範例在本身就具有寬高的元素上設定 .overflow-scroll。

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

使用 Sass 變數，你可以透過更改 _variables.scss 中的 $overflows 變數以自定義溢出通用類別。

Sass

Utilities API

Overflow 通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

    "overflow": (
      property: overflow,
      values: auto hidden visible scroll,
    ),