Bootstrap 5 網格系統
網格系統
Bootstrap 的網格系統是用 flexbox 構建的,頁面上最多允許 12 列。
如果您不想單獨使用所有 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 網格系統如何在不同的屏幕尺寸上工作:
超小型 (<576px) | 小型 (>=576px) | 中型 (>=768px) | 大型 (>=992px) | 超大型 (>=1200px) | 特大型 (>=1400px) | |
---|---|---|---|---|---|---|
類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
網格行為 | 始終水平 | 折疊開始,在斷點之上水平 | 折疊開始,在斷點之上水平 | 折疊開始,在斷點之上水平 | 折疊開始,在斷點之上水平 | 折疊開始,在斷點之上水平 |
容器寬度 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
適用于 | 手機豎屏 | 手機橫屏 | 平板電腦 | 筆記本電腦 | 筆記本電腦和臺式機 | 筆記本電腦和臺式機 |
列的 # | 12 | 12 | 12 | 12 | 12 | 12 |
Gutter 寬度 | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) | 1.5rem (在列的每側 .75rem ) |
可嵌套 | Yes | Yes | Yes | Yes | Yes | Yes |
偏移 | Yes | Yes | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes | Yes | Yes |