跳至主要內容 跳至文件導覽

排版通用類別(Utilities for layout)

為了更快速地進行行動裝置友善和響應式開發,Bootstrap 包含數十個通用類別,用於顯示、隱藏、對齊和間隔內容。

更改 display

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

Flexbox 選項(Flexbox options)

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

如果您需要為元素加入 display: flex,請使用 .d-flex 或其中一個響應式變體(例如 .d-sm-flex)。您需要此類別或 display 值才能使用我們額外的 Flexbox 通用類別來調整大小、對齊、間距等。

外距和內距(Margin and padding)

使用 marginpadding 間距通用類別來控制元素和元件的間距和大小。Bootstrap 包含六級間距通用類別比例,基於預設 $spacer 變數的 1rem 值。選擇適用於所有視窗的值(例如在 LTR 中 .me-3 表示 margin-right: 1rem),或選擇響應式變體來針對特定視窗(例如 .me-md-3 表示從 md 中斷點開始的 margin-right: 1rem——在 LTR 中)。

切換 visibility

當不需要切換 display 時,您可以使用我們的可見性通用類別來切換元素的 visibility。不可見的元素仍會影響頁面的版面配置,但對訪客來說是視覺上隱藏的。