Skip to content
W3S101

Bootstrap 网格示例

Bootstrap 5 网格示例

Section titled “Bootstrap 5 网格示例”

下面是使用 Bootstrap 5 的几个常见网格布局示例。这些示例展示了如何针对不同的屏幕尺寸和场景使用列类（column classes）。请记住，Bootstrap 的网格采用“移动优先”（mobile-first）设计，这意味着较小断点（breakpoints）的样式会应用于较大断点，除非被覆盖。

三个等宽列

Section titled “三个等宽列”

.col-md-4 | .col-md-4 | .col-md-4 （在中等屏幕及以上尺寸下，每列占据 1/3 宽度）

此示例展示了三个等宽列，从中等设备（平板电脑，≥768px）开始应用，并扩展到更大的桌面屏幕。在小型和超小型屏幕上，这些列将垂直堆叠。

<div class="container mt-3">
  <div class="row">
    <div class="col-md-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-4
    </div>
    <div class="col-md-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-4
    </div>
    <div class="col-md-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-4
    </div>
  </div>
</div>

三个不等宽列

Section titled “三个不等宽列”

.col-md-3 | .col-md-6 | .col-md-3 （在中等屏幕及以上尺寸下，占据 25% | 50% | 25% 宽度）

此示例展示了三个不等宽列，从中等设备开始应用。

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-3
    </div>
    <div class="col-md-6" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-6
    </div>
    <div class="col-md-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-3
    </div>
  </div>
</div>

两个不等宽列

Section titled “两个不等宽列”

.col-sm-4 | .col-sm-8 （在小型屏幕及以上尺寸下，占据 1/3 | 2/3 宽度）

此处展示了两个不同宽度的列，从小型设备（≥576px）开始应用。

<div class="container mt-3">
  <div class="row">
    <div class="col-sm-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-4
    </div>
    <div class="col-sm-8" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-8
    </div>
  </div>
</div>

嵌套列

Section titled “嵌套列”

你可以在现有列中嵌套行和列，以创建更复杂的布局。请记住，嵌套的行也在其父列内部使用 12 列系统。

<div class="container mt-3">
  <div class="row">
    <div class="col-sm-8" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-8 (Main)
      <div class="row mt-2">
        <div class="col-6" style="background-color: #d1e7dd; border: 1px solid #a3cfbb; padding: .5rem;">
          .col-6 (Nested)
        </div>
        <div class="col-6" style="background-color: #cff4fc; border: 1px solid #9eeaf9; padding: .5rem;">
          .col-6 (Nested)
        </div>
      </div>
    </div>
    <div class="col-sm-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-4 (Sidebar)
    </div>
  </div>
</div>

混合使用：移动、平板和桌面尺寸

Section titled “混合使用：移动、平板和桌面尺寸”

结合使用不同断点的列类，可以创建真正适应性强的布局。例如，一列可能在移动设备上是全宽，在平板电脑上是半宽，在桌面上是三分之一宽。

提示：每个类会向上扩展。如果你希望在超小型屏幕上使用 .col-12，在小型屏幕上使用 .col-sm-6，在中等屏幕上使用 .col-md-4，这些样式都会生效。对于 lg 及以上尺寸，.col-md-4 将会持续生效，除非被 .col-lg-* 或 .col-xl-* 覆盖。

<div class="container mt-3">
  <!-- Example Row 1 -->
  <div class="row mb-3">
    <div class="col-12 col-md-8" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-md-8 (Full width on xs/sm, 8/12 on md+)
    </div>
    <div class="col-6 col-md-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-6 .col-md-4 (Half width on xs/sm, 4/12 on md+)
    </div>
  </div>
  <!-- Example Row 2 -->
  <div class="row mb-3">
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
  </div>
</div>

注意：在给定的断点下，如果你希望一行的列显示在同一行上，始终要确保该行中所有列单元的总和不超过 12。否则，它们将会换行。

清除浮动 / 响应式换行（行与列的断开）

Section titled “清除浮动 / 响应式换行（行与列的断开）”

在 Bootstrap 5 中，Flexbox 自动处理了大部分的换行行为。然而，如果你的列高度不同，并且想要确保一致的换行效果，你可以在特定断点处使用 width: 100% 工具类元素或者使用行类(.row-cols-*) 来强制列换行。旧的 .clearfix visible-xs 方法已被废弃。请使用 display 工具类或行类（row column classes）。

使用一个全宽的 div 强制在 xs 屏幕上两列后换行，但在 sm 及以上屏幕上允许三列的示例：

<div class="container mt-3">
  <div class="row">
    <div class="col-6 col-sm-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">Column 1</div>
    <div class="col-6 col-sm-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">Column 2</div>


    <!-- Force next columns to break to new line at xs breakpoint -->
    <div class="w-100 d-block d-sm-none"></div>


    <div class="col-6 col-sm-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">Column 3</div>
    <div class="col-6 col-sm-4 d-none d-sm-block" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">Column 4 (hidden on xs)</div>
  </div>
</div>


<!-- Alternative using row-cols for consistent items per row -->
<div class="container mt-3">
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-3">
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 1</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 2</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 3</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 4</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 5</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 6</div>
  </div>
</div>

列偏移

Section titled “列偏移”

使用 .offset-* 类可以将列向右移动。例如，.offset-md-2 会在中等屏幕及以上尺寸下，通过添加左外边距（left margin）将一列向右偏移两个单元。

<div class="container mt-3">
  <div class="row">
    <div class="col-md-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">.col-md-4</div>
    <div class="col-md-4 offset-md-2" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">.col-md-4 .offset-md-2</div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-5 col-md-6" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-5 .col-md-6
    </div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 (Offset on sm, reset on md)
    </div>
  </div>
</div>

重新排序列（推拉）

Section titled “重新排序列（推拉）”

使用 .order-* 类可以改变网格列的视觉顺序。这些类允许你独立于 HTML 中的源代码顺序指定顺序。例如，.order-md-2 设置中等屏幕的顺序，而 .order-1 设置所有屏幕的顺序。使用 .order-first 或 .order-last 可以快速重新排序。

<div class="container mt-3">
  <div class="row">
    <div class="col-md-8 order-md-2" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      First in HTML, Second visually on MD+ (.col-md-8 .order-md-2)
    </div>
    <div class="col-md-4 order-md-1" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      Second in HTML, First visually on MD+ (.col-md-4 .order-md-1)
    </div>
  </div>
</div>

应用场景：一个新闻文章页面，在桌面端，广告侧边栏在视觉上首先出现（.order-md-1），但在 HTML 源代码中，主要文章内容为了更好的 SEO 和可访问性而首先出现（.order-md-2）。