Bootstrap 4 網格系統
Bootstrap 4 網格系統
Bootstrap 的網格系統允許頁面上有最多 12 列。
如果您不想單獨使用全部 12 列，可以將這些列組合在一起以建立更寬的列
| 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 | 跨度 1 |
| 跨度 4 | 跨度 4 | 跨度 4 | |||||||||
| 跨度 4 | 跨度 8 | ||||||||||
| 跨度 6 | 跨度 6 | ||||||||||
| 跨度 12 | |||||||||||
Bootstrap 的網格系統是響應式的，列將根據螢幕大小重新排列：在大螢幕上，內容以三列組織可能看起來更好，但在小螢幕上，內容項最好相互堆疊。
網格類
Bootstrap 4 網格系統有五個類
.col-(超小裝置 - 螢幕寬度小於 576px).col-sm-(小裝置 - 螢幕寬度等於或大於 576px).col-md-(中型裝置 - 螢幕寬度等於或大於 768px).col-lg-(大型裝置 - 螢幕寬度等於或大於 992px).col-xl-(超大裝置 - 螢幕寬度等於或大於 1200px)
以上類可以組合以建立更動態和靈活的佈局。
提示: 每個類都會向上擴充套件，因此如果您希望為 sm 和 md 設定相同的寬度，您只需要指定 sm。
網格系統規則
一些 Bootstrap 4 網格系統規則
- 行必須放置在
.container（固定寬度）或.container-fluid（全寬度）中，以實現正確的對齊和內邊距 - 使用行建立水平列組
- 內容應放置在列內，並且只有列可以是行的直接子元素
- 預定義類（如
.row和.col-sm-4）可用於快速建立網格佈局 - 列透過內邊距建立溝槽（列內容之間的間隙）。透過
.rows上的負外邊距，在第一列和最後一列中抵消了該內邊距 - 網格列是透過指定您希望跨越的 12 個可用列的數量來建立的。例如，三個等寬列將使用三個
.col-sm-4 - 列寬以百分比表示，因此它們始終是流動的，並相對於其父元素進行大小調整
- Bootstrap 3 和 Bootstrap 4 之間最大的區別是 Bootstrap 4 現在使用 Flexbox 而不是浮動。Flexbox 的一個巨大優勢是未指定寬度的網格列將自動佈局為“等寬列”（和等高）。例如：三個帶有
.col-sm的元素將從小型斷點開始自動各自佔據 33.33% 的寬度。提示：如果您想了解更多關於 Flexbox 的資訊，可以閱讀我們的 CSS Flexbox 教程。
請注意，IE9 及更早版本不支援 Flexbox。
如果您需要支援 IE8-9，請使用 Bootstrap 3。 它是最穩定的 Bootstrap 版本，並且仍然受到團隊的支援以進行關鍵的 bug 修復和文件更改。但是，它不會新增任何新功能。
Bootstrap 4 網格的基本結構
以下是 Bootstrap 4 網格的基本結構
<!-- 控制列寬以及它們在不同裝置上的顯示方式 -->
<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 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 網格系統在不同螢幕尺寸下的工作方式
| 超小 (<576px) | 小 (>=576px) | 中 (>=768px) | 大 (>=992px) | 超大 (>=1200px) | |
|---|---|---|---|---|---|
| 類字首 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| 網格行為 | 始終水平 | 開始時摺疊，在斷點之上水平 | 開始時摺疊，在斷點之上水平 | 開始時摺疊，在斷點之上水平 | 開始時摺疊，在斷點之上水平 |
| 容器寬度 | 無（自動） | 540px | 720px | 960px | 1140px |
| 適用於 | 豎屏手機 | 橫屏手機 | 平板電腦 | 筆記型電腦 | 筆記型電腦和桌上型電腦 |
| 列數 | 12 | 12 | 12 | 12 | 12 |
| 溝槽寬度 | 30px（每列兩側各 15px） | 30px（每列兩側各 15px） | 30px（每列兩側各 15px） | 30px（每列兩側各 15px） | 30px（每列兩側各 15px） |
| 可巢狀 | 是 | 是 | 是 | 是 | 是 |
| 偏移量 | 是 | 是 | 是 | 是 | 是 |
| 列排序 | 是 | 是 | 是 | 是 | 是 |
示例
接下來的章節將展示針對不同裝置和螢幕寬度的網格系統示例
