Bootstrap 網格範例

基本的網格配置，讓您熟悉在 Bootstrap 網格系統中建置。

在這些範例中，.themed-grid-col 類別會新增至欄，以新增一些主題。這不是 Bootstrap 中預設提供的類別。

五個網格層級

Bootstrap 網格系統有五個層級，每個層級對應一個我們支援的裝置範圍。每個層級從最小視窗大小開始，並自動套用到較大的裝置，除非另有指定。

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

三個等寬欄

取得三個等寬欄，從桌面開始縮放至大型桌面。在行動裝置、平板電腦及以下裝置上，這些欄會自動堆疊。

.col-md-4

三個等寬欄（替代方案）

透過使用 .row-cols-* 類別，您可以輕鬆建立具有等寬欄的網格。

.row-cols-md-3 的 .col 子類別

三個不等寬欄

取得三個欄，從桌面開始縮放至大型桌面，具有不同的寬度。請記住，網格欄在單一水平區塊中應加總為十二。超過此數值，欄會開始堆疊，不論視窗大小為何。

.col-md-3

.col-md-6

.col-md-3

兩個欄

取得兩個欄，從桌面開始縮放至大型桌面。

.col-md-8

.col-md-4

全寬，單一欄

全寬元素不需要網格類別。

兩個欄，包含兩個巢狀欄

根據文件，巢狀很容易，只要在現有欄中放置一排欄即可。這會讓您取得兩個欄，從桌面開始縮放至大型桌面，在較大的欄中再包含兩個等寬欄。

在行動裝置尺寸、平板電腦及以下，這些欄位及其巢狀欄位將會堆疊。

.col-md-8

.col-md-6

.col-md-4

混合：行動裝置和桌上型電腦

Bootstrap v5 網格系統有六層類別：xs（特小，此類別前綴未使用）、sm（小）、md（中）、lg（大）、xl（特大）和 xxl（超特大）。你可以使用這些類別的幾乎任何組合來建立更動態且彈性的版面。

每一層類別都會縮放，表示如果你計畫為 md、lg、xl 和 xxl 設定相同的寬度，你只需要指定 md。

.col-md-8

.col-6 .col-md-4

.col-6

混合：行動裝置、平板電腦和桌上型電腦

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

間距

使用 .gx-* 類別，可以調整水平間距。

.col 搭配 .gx-4 間距

使用 .gy-* 類別來控制垂直間距。

.col 搭配 .gy-4 間距

使用 .g-* 類別，可以調整兩個方向的間距。

.col 搭配 .g-3 間距

容器

Bootstrap v4.4 中新增的其他類別允許容器在特定斷點之前為 100% 寬度。v5 新增一個新的 xxl 斷點。

.container

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid