佈局實用程序

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

改變display

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

彈性盒選項

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

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

邊距和填充

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

切換visibility

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