Bootstrap 网格系统

Bootstrap 5 网格系统

理解 Bootstrap 网格

Bootstrap 强大网格系统使用一系列的容器（containers）、行（rows）和列（columns）来布局和对齐内容。它基于 flexbox 构建，并完全响应式，允许在一行中最多包含 12 列。

你不必单独使用全部 12 列。你可以将它们组合起来创建更宽的列。例如，三个等宽的列将各使用 4 个单位（.col-4 或 .col-md-4）。

列组合的视觉表示：

12 x .col-1 (或 .col-sm-1 等) [ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]

3 x .col-4 [ ][ ][ ]

1 x .col-4 和 1 x .col-8 [ ][ ]

2 x .col-6 [ ][ ]

1 x .col-12 [ ]

网格系统是响应式的，这意味着列会根据屏幕尺寸自动重新排列。例如，桌面上的三列布局在手机上可能会堆叠成单列布局，以获得最佳的浏览体验。

关键原则：一行中的网格列单位总和理想情况下不应超过 12 个单位。如果你在单行中添加超过 12 个列单位，多余的列将换行到新的一行。

网格层级（断点）

Bootstrap 5 包含六个响应式层级（断点），用于构建灵活的布局：

• 隐式特小型 (xs) - <576px（使用 .col-*）
• 小型 (sm) - ≥576px（使用 .col-sm-*）
• 中型 (md) - ≥768px（使用 .col-md-*）
• 大型 (lg) - ≥992px（使用 .col-lg-*）
• 特大型 (xl) - ≥1200px（使用 .col-xl-*）
• 超特大型 (xxl) - ≥1400px（使用 .col-xxl-*）

这些类可以组合使用，创建高度动态和自适应的布局。Bootstrap 是移动优先的，因此适用于较小断点的类（例如 .col-sm-6）也适用于较大断点，除非被较大断点的类（例如 .col-lg-4）覆盖。如果你希望从特小型设备开始所有断点都具有相同的宽度，你只需指定基础的 .col-* 类（例如 .col-6）。

网格基本规则

遵循这些规则以正确实现网格：

• 行（.row）必须放置在 .container（固定宽度，响应式）或 .container-fluid（全宽）或响应式容器（例如 .container-md）内，以实现正确的对齐和内边距。
• 使用行来创建列的水平组。行是列的容器。
• 内容应放置在列（.col-*）内，并且只有列可以是行的直接子元素。
• 可以使用预定义的网格类，如 .row 和 .col-sm-4，快速创建网格布局。
• 列之间的间隔（称为 Gutters）通过列上的内边距创建，并通过 .row 元素上的 .g-*、.gx-*（水平）或 .gy-*（垂直）工具类来控制。例如，.row.g-3 将设置 Gutters 为 1rem（间隔工具类中 3 的默认值）。
• 通过指定你希望占用的 12 个可用单位中的数量来创建列。例如，三个等宽的列将使用三个 .col-4（或 .col-md-4 等）。
• 没有指定数字的列（例如，.col 或 .col-md）将自动布局为行内等宽的列。

Bootstrap 网格的基本结构

以下是概念性的结构：

<div class="container">
  <div class="row gx-3">
    <!-- gx-3 adds horizontal gutters -->
    <!-- gx-3 添加水平间隔 -->
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
  <div class="row mt-3 gy-3">
    <!-- mt-3 for margin top, gy-3 for vertical gutters -->
    <!-- mt-3 用于顶部外边距，gy-3 用于垂直间隔 -->
    <div class="col-lg-4">Column A</div>
    <div class="col-lg-4">Column B</div>
    <div class="col-lg-4">Column C</div>
  </div>
</div>

构建你的布局：首先，创建一个容器（.container 或 .container-fluid）。在容器内部，添加行（.row）。然后，在行内添加你的列（.col-*）。记住，列的数字（例如 .col-md-6 中的 6）指的是该行内的 12 单位系统。

网格选项摘要（Bootstrap 5）

此表总结了 Bootstrap 网格系统在不同设备上的工作方式：

特性 特小型 (xs) 小型 (sm) 中型 (md) 大型 (lg) 特大型 (xl) 超特大型 (xxl)

断点 <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px

类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-

容器最大宽度 无 (自动) 540px 720px 960px 1140px 1320px

列数 12 12 12 12 12 12

间隔宽度 通过 .g-、.gx-、.gy-* 定制（列之间默认 1.5rem / 24px）

可嵌套 是 是 是 是 是 是

偏移 是 (.offset-, .offset-sm- 等) 是 是 是 是 是

列排序 是 (.order-, .order-sm- 等) 是 是 是 是 是

应用场景：一个复杂的电子商务产品页面。网格可以用来创建主要产品图片区域、用于产品详情和购买选项的侧边栏，以及下方用于相关产品的部分。每个部分可以针对不同的屏幕尺寸采用不同的列配置，以确保最佳的用户体验。

常见错误：忘记将列放在 .row 内，或将 .row 放在 .container 内。这可能导致意外的对齐和间距问题。始终遵循 container > row > col 的层级结构。

有关更多详细信息，请探索 Bootstrap 官方网格文档，包括自动布局列、Flexbox 对齐工具类以及更高级的间隔控制等信息。

示例

接下来的章节提供了针对不同场景和设备尺寸的网格布局的实际示例。

• 堆叠到水平布局
• 小型设备布局
• 中型设备布局
• 大型设备布局
• 混合设备布局