版面配置工具
為了更快速地進行行動友善且具回應能力的開發,Bootstrap 包含數十個用於顯示、隱藏、對齊和配置內容間距的工具類別。
在此頁面中
變更 display
使用我們的 顯示工具 針對 display
屬性的常見值進行回應式切換。將它與我們的格狀系統、內容或元件混合使用,以在特定視窗中顯示或隱藏它們。
彈性盒狀選項
Bootstrap 是使用彈性盒狀建置的,但並非每個元素的 display
都已變更為 display: flex
,因為這會新增許多不必要的覆寫並意外變更瀏覽器的主要行為。我們的大部分 元件 都是使用已啟用的彈性盒狀建置的。
如果您需要將 display: flex
新增至元素,請使用 .d-flex
或其中一個回應式變體(例如 .d-sm-flex
)。您需要此類別或 display
值才能使用我們的額外 彈性盒狀模型公用程式 來調整大小、對齊、間距等。
邊界和內距
使用 margin
和 padding
間距公用程式 來控制元素和元件的間距和大小。Bootstrap 包含一個六級間距公用程式比例,基於預設 $spacer
變數的 1rem
值。為所有視窗選擇值(例如,LTR 中的 .me-3
代表 margin-right: 1rem
),或選擇回應式變體來鎖定特定視窗(例如,LTR 中的 .me-md-3
代表 margin-right: 1rem
,從 md
斷點開始)。
切換 visibility
當不需要切換 display
時,您可以使用我們的 可見性公用程式 切換元素的 visibility
。不可見的元素仍會影響頁面的配置,但對訪客而言是視覺上隱藏的。