Bootstrap 5 網格系統

網格系統

Bootstrap 的網格系統是基於 flexbox 構建的，最多允許頁面跨越 12 列。

如果您不想單獨使用所有 12 列，可以將列組合在一起以建立更寬的列。

網格系統是響應式的，列會根據螢幕尺寸自動重新排列。

確保總數加起來為 12 或更少（不要求您使用所有 12 個可用列）。

網格類

Bootstrap 5 網格系統有六個類

• .col- (超小裝置 - 螢幕寬度小於 576px)
• .col-sm- (小裝置 - 螢幕寬度等於或大於 576px)
• .col-md- (中型裝置 - 螢幕寬度等於或大於 768px)
• .col-lg- (大型裝置 - 螢幕寬度等於或大於 992px)
• .col-xl- (超大裝置 - 螢幕寬度等於或大於 1200px)
• .col-xxl- (超大螢幕裝置 - 螢幕寬度等於或大於 1400px)

以上類可以組合以建立更動態和靈活的佈局。

提示： 每個類都會向上擴充套件，所以如果您想為 sm 和 md 設定相同的寬度，您只需要指定 sm 即可。

Bootstrap 5 網格的基本結構

以下是 Bootstrap 5 網格的基本結構

第一個示例：建立一個行（<div class="row">）。然後，新增所需的列數（帶有相應 .col-*-* 類的標籤）。第一個星號 (*) 代表響應式：sm、md、lg、xl 或 xxl，而第二個星號代表一個數字，每行應加起來為 12。

第二個示例：而不是在每個 col 中新增數字，讓 bootstrap 處理佈局，以建立等寬的列：兩個 "col" 元素 = 每列 50% 寬度，而三列 = 每列 33.33% 寬度。四列 = 25% 寬度，以此類推。您還可以使用 .col-sm|md|lg|xl|xxl 來使列具有響應性。

網格選項

下表總結了 Bootstrap 5 網格系統在不同螢幕尺寸下的工作方式