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

版面配置工具

為了更快速地進行行動友善且具回應能力的開發,Bootstrap 包含數十個用於顯示、隱藏、對齊和配置內容間距的工具類別。

變更 display

使用我們的 顯示工具 針對 display 屬性的常見值進行回應式切換。將它與我們的格狀系統、內容或元件混合使用,以在特定視窗中顯示或隱藏它們。

彈性盒狀選項

Bootstrap 是使用彈性盒狀建置的,但並非每個元素的 display 都已變更為 display: flex,因為這會新增許多不必要的覆寫並意外變更瀏覽器的主要行為。我們的大部分 元件 都是使用已啟用的彈性盒狀建置的。

如果您需要將 display: flex 新增至元素,請使用 .d-flex 或其中一個回應式變體(例如 .d-sm-flex)。您需要此類別或 display 值才能使用我們的額外 彈性盒狀模型公用程式 來調整大小、對齊、間距等。

邊界和內距

使用 marginpadding 間距公用程式 來控制元素和元件的間距和大小。Bootstrap 包含一個六級間距公用程式比例,基於預設 $spacer 變數的 1rem 值。為所有視窗選擇值(例如,LTR 中的 .me-3 代表 margin-right: 1rem),或選擇回應式變體來鎖定特定視窗(例如,LTR 中的 .me-md-3 代表 margin-right: 1rem,從 md 斷點開始)。

切換 visibility

當不需要切換 display 時,您可以使用我們的 可見性公用程式 切換元素的 visibility。不可見的元素仍會影響頁面的配置,但對訪客而言是視覺上隱藏的。