Bootstrap 5 網格示例

下面我們收集了一些 Bootstrap 5 網格佈局的示例。

三個等寬列

在指定數量的元素上使用 .col 類，Bootstrap 會識別出有多少個元素（並建立等寬的列）。在下面的示例中，我們使用了三個 col 元素，每個元素的寬度為 33.33%。

使用數字建立三個等寬列

您還可以使用數字來控制列的寬度。只需確保總和等於 12 或更少（不要求您使用所有 12 個可用列）。

三個不等寬列

要建立不等寬列，您必須使用數字。以下示例將建立 25%/50%/25% 的分割。

設定一列的寬度

但是，只需設定一列的寬度就足夠了，其餘列會自動調整大小。以下示例將建立 25%/50%/25% 的分割。

更多等寬列

行內列

您還可以透過 .row-cols-* 類來控制相鄰的列數（無論有多少個 col），

更多不等寬列

等高

如果其中一列比另一列高（由於文字或 CSS 高度），其他列也會跟隨。

巢狀列

以下示例顯示瞭如何建立一個兩列布局，其中一列內有另外兩列。

響應式類

Bootstrap 5 網格系統有五個類

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

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

提示: 每個類都會向上擴充套件，因此如果您希望為 sm 和 md 設定相同的寬度，您只需要指定 sm。

從堆疊到水平

以下示例顯示瞭如何在超小裝置上開始堆疊（預設垂直顯示），然後在較大裝置（sm, md, lg 和 xl）上變為水平佈局。

混合搭配

無間距

要更改列之間的間距（額外空間），請使用任何 .g-1|2|3|4|5 類（.g-4 是預設值）。

要完全刪除間距，請使用 .g-0。