View on GitHub
排版通用類別 (Utilities for layout)
為了加速行動優先及響應式開發,Bootstrap 包含了數十種用於顯示、隱藏、對齊、和調整內容的通用類別。
On this page
切換 display
使用我們的 display 通用類別 以響應式切換 display
屬性的常用值。 將其與我們的網格系統、內容或元件混合使用以在特定視窗顯示或隱藏他們。
Flexbox 選項
Bootstrap 是使用 flexbox 建構的,但並非每個元素的 display
都要更改為 display: flex
,因為這會增加許多不必要的覆寫以及意外更改關鍵的瀏覽器行為。我們大多數的元件都是在啟用 flexbox 的狀態下建構的。
如果您需要在元素上增加 display: flex
,請使用 .d-flex
或一種響應式變體 (e.g., .d-sm-flex
). 您將需要此類型或 display
的數值以允許使用我們額外的 flexbox 通用類別 來調整大小、對齊、間隔等。
Margin 跟 padding
使用 margin
與 padding
等 spacing 通用類別 來控制元素以及元件的間距與大小。 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
。不可見的元素仍會影響頁面的佈局,但在視覺上會是隱藏的。