Source

佈局實用程序

為了更快地進行移動友好和響應式開發,Bootstrap 包含數十個用於顯示、隱藏、對齊和間隔內容的實用程序類。

改變display

使用我們的顯示實用程序來響應切換屬性的常見值display。將其與我們的網格系統、內容或組件混合,以在特定視口中顯示或隱藏它們。

彈性盒選項

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

如果您需要添加display: flex到元素,請使用.d-flex響應變體之一(例如,.d-sm-flex)。您將需要此類或display值來允許使用我們額外的flexbox 實用程序來調整大小、對齊、間距等。

邊距和填充

使用marginpadding 間距實用程序來控制元素和組件的間距和大小。Bootstrap 4 包括基於1rem值默認$spacer變量的五級間距實用程序。為所有視口選擇值(例如,.mr-3for margin-right: 1rem),或選擇響應變體以針對特定視口(例如,.mr-md-3margin-right: 1rem斷點開始md)。

切換visibility

display不需要切換時,您可以使用我們的可見性實用程序visibility來切換元素。不可見的元素仍然會影響頁面的佈局,但在視覺上對訪問者是隱藏的。