Bootstrap 5 網格：從堆疊到水平

網格實例：堆疊到水平

讓我們創建一個基本的網格系統，該系統開始時在超小型設備上堆疊，然后在較大設備上變為水平。

下面的例子展示了一個簡單的“堆疊到水平”的兩列布局，這意味著它會在所有屏幕上產生 50%/50% 的拆分，除了超小型屏幕，它會自動堆疊 (100%)：

實例：堆疊到水平

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>列 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>列 2 ...</p>
    </div>
  </div>
</div>

親自試一試

提示：.col-sm-* 類中的數字表示 div 應該跨越多少列（共 12 列）。所以，.col-sm-1 跨越 1 列，.col-sm-4 跨越 4 列，.col-sm-6 跨越 6 列，以此類推。

注意：請確保總和等于或小于 12（不需要使用所有 12 個可用列）：

提示：通過將 .container-fluid 類更改為 .container，您可以將任何 full-width 布局轉換為 fixed-width 的響應式布局：

實例：響應式容器

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>列 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>列 2 ...</p>
    </div>
  </div>
</div>

親自試一試

自動布局列

在 Bootstrap 5 中，有一種簡單的方法可以為所有設備創建等寬的列：只需從 .col-size-* 中刪除數字，并僅在 col 元素上使用 .col-size 類。Bootstrap 將識別有多少列，并且每列將獲得相同的寬度。size 類（sm、md 等）決定了列何時應該響應：

<!-- 兩列：所有屏幕上的 50% 寬度，除了超小型設備（100% 寬度） -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- 四列：所有屏幕上的 25% 寬度，除了超小型設備（100% 寬度） -->
<div class="row">
  <div class="col-sm">1 of 4</div>
  <div class="col-sm">2 of 4</div>
  <div class="col-sm">3 of 4</div>
  <div class="col-sm">4 of 4</div>
</div>

親自試一試