Skip to main content Skip to docs navigation
View on GitHub

排版通用類別 (Utilities for layout)

為了加速行動優先及響應式開發,Bootstrap 包含了數十種用於顯示、隱藏、對齊、和調整內容的通用類別。

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

立即上課去

切換 display

使用我們的 display 通用類別 以響應式切換 display 屬性的常用值。 將其與我們的網格系統、內容或元件混合使用以在特定視窗顯示或隱藏他們。

Flexbox 選項

Bootstrap 是使用 flexbox 建構的,但並非每個元素的 display 都要更改為 display: flex ,因為這會增加許多不必要的覆寫以及意外更改關鍵的瀏覽器行為。我們大多數的元件都是在啟用 flexbox 的狀態下建構的。

如果您需要在元素上增加 display: flex ,請使用 .d-flex 或一種響應式變體 (e.g., .d-sm-flex). 您將需要此類型或 display 的數值以允許使用我們額外的 flexbox 通用類別 來調整大小、對齊、間隔等。

Margin 跟 padding

使用 marginpaddingspacing 通用類別 來控制元素以及元件的間距與大小。 Bootstrap 包含六個層級的間隔寬度,以 1rem 為基準默認 $spacer 的變量。選擇所有視口的數值 (e.g., .me-3 代表 margin-right: 1rem in LTR),或以特定視口為目標去選擇響應式變量 (e.g., .me-md-3 代表 margin-right: 1rem —in LTR— 從 md 的斷點開始).

切換 visibility

如果不需要切換 display ,您可以使用我們的 visibility 通用類別 來切換元素的 visibility 。不可見的元素仍會影響頁面的佈局,但在視覺上會是隱藏的。