Bootstrap 4 網格示例

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

三個等寬列

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

使用數字建立三個等寬列

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

三個不等寬列

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

設定一個列的寬度

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

更多等寬列

Row Cols

您還可以使用 `.row-cols-*` 類來控制每行應出現多少個列（無論有多少個 col），

更多不等寬列

等高

如果一個列比另一個列高（由於文字或 CSS 高度），其餘的將跟隨。

巢狀列

下面的示例顯示瞭如何建立一個兩列布局，其中一列內還包含另外兩列。

響應式類

Bootstrap 4 網格系統有五個類

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

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

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

堆疊為水平

下面的示例顯示瞭如何建立一個列布局，該佈局在超小裝置上是堆疊的，然後在較大裝置（sm、md、lg 和 xl）上變為水平。

混合搭配

無邊距

為 `.row` 容器新增 `.no-gutters` 類以移除邊距（額外的空間）。