Bootstrap 5 網格
Bootstrap 5 網格系統
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 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">
<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 或 xxl，而第二個星號代表一個數字，每行加起來應該等於 12。
第二個例子：不用為每個 col 新增數字，讓 bootstrap 處理佈局，建立等寬列：兩個 "col" 元素 = 每個列 50% 寬度，三個列 = 每個列 33.33% 寬度。四個列 = 25% 寬度，以此類推。你也可以使用 .col-sm|md|lg|xl|xxl 來使列具有響應性。
下面我們收集了一些基本的 Bootstrap 5 網格佈局示例。
三個等寬列
.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>
自己動手試一試 »
提示: 你將在本教程的後續部分了解到更多關於 網格系統 的內容。
