版面配置工具

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

變更 display

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

彈性盒狀模型選項

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

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

外框和內距

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

切換 visibility

當不需要切換 display 時，您可以使用我們的 可見度工具 來切換元素的 visibility。不可見的元素仍會影響頁面的版面配置，但訪客不會看到它們。