BS5 小型网格

---

小型设备网格实例

	超小设备	小型设备	中型设备	大型设备	特大设备	超大设备
Class 前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
屏幕宽度	<576px	>=576px	>=768px	>=992px	>=1200px	>=1400px

假设我们有一个包含两列的简单布局。对于小型设备，我们希望将列拆分为 25%/75% 。

小型设备被定义为屏幕宽度为: 576px 到 767px。

对于小型设备，我们将使用 .col-sm-* 类。

我们将在两列中添加以下类:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

以下示例将设置小型（以及中型，大型，特大型，超大型）设备上 25%/75% 拆分。在超小型设备上，它会自动堆叠 (100%):

.col-sm-3 .col-sm-9

实例

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div> 亲自试一试 »

Note: 请确保每一行中列的总和等于或小于 12:

对于 33.3%/66.6% 的分割，您可以使用 .col-sm-4 和 .col-sm-8 (对于 50%/50% 的分割，您可以使用 .col-sm-6 和 .col-sm-6):

.col-sm-4 .col-sm-8
.col-sm-6 .col-sm-6

实例

<!-- 33.3/66.6% 拆分: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

<!-- 50%/50% 拆分: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div> 亲自试一试 »

---

Advertisement

-->

---

等宽列自动布局

在 Bootstrap 5 中，有一种简单的方法可以为所有设备创建等宽列:只需删除 .col-sm-* 中的数字，并且只在指定数量的列元素上使用 .col-sm 类。Bootstrap 将识别有多少列，并且每一列的宽度相同。

如果屏幕尺寸 小于 576px，列将水平堆叠:

<!-- 两列:所有屏幕上的 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> 1 of 2 2 of 2
1 of 4 2 of 4 3 of 4 4 of 4 亲自试一试 »

下一章将展示如何为中型设备添加不同的拆分百分比。