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