Bootstrap 5 網格

Bootstrap 5 網格系統

Bootstrap 的網格系統是用 flexbox 構建的，頁面上最多允許 12 列。

如果您不想單獨使用所有 12 列，那么可以將這些列組合在一起，以創建更寬的列：

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

網格系統響應迅速，列會根據屏幕大小自動重新排列。

請確保總和等于或小于 12（如果不需要使用所有 12 個可用列）。

網格類

Bootstrap 5 網格系統有六個類：

  • .col- (超小型設備 - 屏幕寬度小于 576px)
  • .col-sm- (小型設備 - 屏幕寬度等于或大于 576px)
  • .col-md- (中型設備 - 屏幕寬度等于或大于 768 像素)
  • .col-lg- (大型設備 - 屏幕寬度等于或大于 992 像素)
  • .col-xl- (xlarge 設備 - 屏幕寬度等于或大于 1200px)
  • .col-xxl- (xxlarge 設備 - 屏幕寬度等于或大于 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" 元素 = 每個 col 為 50% 寬度，而三個 cols = 每個 col 為 33.33% 寬度。四個列 = 25% 寬度，等等。您還可以使用 .col-sm|md|lg|xl|xxl 使列獲得響應性。

下面我們整理了一些基本的 Bootstrap 5 網格布局的例子。

三等分列

下例顯示如何在所有設備和屏幕寬度上創建三個等寬列：

實例

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

親自試一試

響應式列

下例顯示了如何從平板電腦開始創建四個等寬的列，然后擴展到超大桌面。在寬度小于 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>

親自試一試

兩個不等的響應式列

下例顯示了如何在平板電腦得到兩個不同寬度的列并擴展到超大型桌面：

實例

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

親自試一試

提示：您將在本教程的后面學習有關 網格系統 的更多內容。