Bootstrap 网格系统

网格系统（Grid System）是 Bootstrap 的灵魂。它把一行分成 12 列，通过不同断点下的列宽类，让同一份 HTML 在手机、平板、电脑上呈现不同的排列，从而实现真正的响应式布局。

网格原理

网格基于 Flexbox：.row 是一行，里面放若干 .col-* 列。12 是总列数，能被 12 整除的宽度组合（如 6+6、4+4+4、3+3+3+3）都能等分整行。列宽类写法为 col-断点-份数。

等宽列与指定宽度

<!-- 前提：页面已通过 CDN 引入 Bootstrap 5（方式见"环境安装"章节）；手机堆叠，平板起并排 -->
<div class="container mt-3">
  <div class="row">
    <div class="col-md-6 bg-primary text-white p-3">左：占 6 列</div>
    <div class="col-md-6 bg-secondary text-white p-3">右：占 6 列</div>
  </div>
  <div class="row mt-2">
    <div class="col bg-success text-white p-3">自动等宽</div>
    <div class="col bg-info text-white p-3">自动等宽</div>
    <div class="col bg-warning p-3">自动等宽</div>
  </div>
</div>

显示效果：第一行两块各占一半；在手机（小于 768px）上它们会上下堆叠；第二行三块自动平分整行，任何屏幕都并排显示。

断点（Breakpoints）

Bootstrap 5 提供 6 个断点：xs(<576)、sm(≥576)、md(≥768)、lg(≥992)、xl(≥1200)、xxl(≥1400)。不带断点的 .col 始终按比例等分；col-sm-6 表示从 sm 断点起占 6 份，sm 以下恢复全宽堆叠。

列偏移与嵌套

用 .offset-md-2 让列向右空出若干份数；行内还能再放 .row 实现嵌套，形成更复杂的版面：

<!-- 偏移与嵌套示例 -->
<div class="container">
  <div class="row">
    <div class="col-md-4 offset-md-4 bg-primary text-white p-2">居中占 4 列（左右各空 4）</div>
  </div>
  <div class="row">
    <div class="col-md-6 bg-info p-3">
      外层左列
      <div class="row">
        <div class="col-6 bg-light border">内层 1</div>
        <div class="col-6 bg-light border">内层 2</div>
      </div>
    </div>
  </div>
</div>

显示效果：第一行内容在中等屏幕及以上时水平居中；第二行外层占 6 份，内部又分成两个半宽子列，体现「行套行」的嵌套写法。

排序与对齐

栅格还支持调整顺序与垂直对齐：.order-first、.order-last 改变列在视觉上的先后；.align-items-center 让整行垂直居中，.align-self-end 让单列贴底。这些类让布局不必依赖 HTML 的书写顺序。

小结

记住公式「.row 内放 .col-断点-份数，12 份凑一行」，配合断点、偏移、嵌套即可胜任绝大多数响应式布局。