Bootstrap 4 網格
Bootstrap 4 網格系統
Bootstrap 的網格系統是基於 flexbox 構建的，最多允許頁面跨越 12 列。
如果您不想單獨使用所有 12 列，可以將列組合在一起以建立更寬的列。
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
網格系統是響應式的，列會根據螢幕尺寸自動重新排列。
確保總數加起來為 12 或更少（不要求您使用所有 12 個可用列）。
網格類
Bootstrap 4 網格系統有五個類
.col-(超小裝置 - 螢幕寬度小於 576px).col-sm-(小裝置 - 螢幕寬度等於或大於 576px).col-md-(中型裝置 - 螢幕寬度等於或大於 768px).col-lg-(大型裝置 - 螢幕寬度等於或大於 992px).col-xl-(超大裝置 - 螢幕寬度等於或大於 1200px)
以上類可以組合以建立更動態和靈活的佈局。
提示: 每個類都會向上擴充套件，因此如果您希望為 sm 和 md 設定相同的寬度，您只需要指定 sm。
Bootstrap 4 網格的結構
以下是 Bootstrap 4 網格的基本結構
<!-- 控制列寬以及它們在不同裝置上的顯示方式 -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 或者讓 Bootstrap 自動處理佈局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
第一個示例：建立一個行 (<div class="row">)。然後，新增所需的列數（帶有適當 .col-*-* 類的標籤）。第一個星號 (*) 代表響應式：sm, md, lg 或 xl，而第二個星號代表一個數字，每行應累加到 12。
第二個示例：不是為每個 col 新增數字，而是讓 bootstrap 處理佈局，以建立等寬的列：兩個 "col" 元素 = 每列 50% 寬度。三個列 = 每列 33.33% 寬度。四個列 = 25% 寬度，依此類推。您還可以使用 .col-sm|md|lg|xl 來使列具有響應性。
下面我們收集了一些基本的 Bootstrap 4 網格佈局示例。
三個等寬列
.col
.col
.col
下面的示例顯示瞭如何在所有裝置和螢幕寬度上建立三列等寬的列
示例
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
自己動手試一試 »
響應式列
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
下面的示例顯示瞭如何建立四列等寬的列，從平板電腦開始，擴充套件到超大桌面。在手機或螢幕寬度小於 576px 時，列將自動堆疊在一起
示例
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
自己動手試一試 »
兩個不等寬響應式列
.col-sm-4
.col-sm-8
下面的示例顯示瞭如何獲得從平板電腦開始，擴充套件到大號超大桌面的兩列不等寬的列
示例
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
自己動手試一試 »
提示： 您將在本教程的後面部分學習更多關於 Bootstrap 4 網格的內容。
