佈局實用程序
為了更快地進行移動友好和響應式開發,Bootstrap 包含數十個用於顯示、隱藏、對齊和間隔內容的實用程序類。
使用我們的顯示實用程序來響應切換屬性的常見值display
。將其與我們的網格系統、內容或組件混合,以在特定視口中顯示或隱藏它們。
Bootstrap 4 是使用 flexbox 構建的,但並非每個元素display
都已更改為,display: flex
因為這會添加許多不必要的覆蓋並意外更改關鍵瀏覽器行為。我們的大多數組件都是在啟用 flexbox 的情況下構建的。
如果您需要添加display: flex
到元素,請使用.d-flex
響應變體之一(例如,.d-sm-flex
)。您將需要此類或display
值來允許使用我們額外的flexbox 實用程序來調整大小、對齊、間距等。
使用margin
和padding
間距實用程序來控制元素和組件的間距和大小。Bootstrap 4 包括基於1rem
值默認$spacer
變量的五級間距實用程序。為所有視口選擇值(例如,.mr-3
for margin-right: 1rem
),或選擇響應變體以針對特定視口(例如,.mr-md-3
從margin-right: 1rem
斷點開始md
)。
當display
不需要切換時,您可以使用我們的可見性實用程序visibility
來切換元素。不可見的元素仍然會影響頁面的佈局,但在視覺上對訪問者是隱藏的。