堆疊/水平

網(wǎng)格實例：堆疊到水平

讓我們創(chuàng)建一個基本的網(wǎng)格系統(tǒng)，該系統(tǒng)開始時在超小型設(shè)備上堆疊，然后在較大設(shè)備上變?yōu)樗健?/p>

下面的例子展示了一個簡單的“堆疊到水平”的兩列布局，這意味著它會在所有屏幕上產(chǎn)生 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-* 類中的數(shù)字表示 div 應(yīng)該跨越多少列（共 12 列）。所以，.col-sm-1 跨越 1 列，.col-sm-4 跨越 4 列，.col-sm-6 跨越 6 列，以此類推。

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

提示：通過將 .container-fluid 類更改為 .container，您可以將任何 full-width 布局轉(zhuǎn)換為 fixed-width 的響應(yīng)式布局：

實例：響應(yīng)式容器

<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 中，有一種簡單的方法可以為所有設(shè)備創(chuàng)建等寬的列：只需從 .col-size-* 中刪除數(shù)字，并僅在 col 元素上使用 .col-size 類。Bootstrap 將識別有多少列，并且每列將獲得相同的寬度。size 類（sm、md 等）決定了列何時應(yīng)該響應(yīng)：

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

<!-- 四列：所有屏幕上的 25% 寬度，除了超小型設(shè)備（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>