2.2 栅格断案：十二列证据链

2.2 栅格断案：十二列证据链

栅格系统是 Bootstrap 布局的度量衡：.row 负责分行并吃掉列的负外边距，.col-* 按十二分之一为单位分配宽度，断点前缀决定从哪级视口起按此分配。任何「这几块内容各占多宽、何时换行」的争议，最终都要折算成十二列上的证据来裁决。

位置：容器（2.1）划定了审判范围，本节在范围内分地。它是全册代码密度最高的一节，后面组件章、实战章的布局全部建立在这套证据链上。

证据链第一环：行与列的基本事实

图 2-2 十二列栅格的解剖

<!-- 最小栅格：手机整行、768px 起三比七 -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-3 bg-body-secondary border">侧栏 col-md-3</div>
    <div class="col-12 col-md-9 bg-body-secondary border">正文 col-md-9</div>
  </div>
</div>
<!-- 验证：md 视口下 3+9=12 恰好一行；xs 视口下两条 col-12 各占一行 -->
​

三条基本事实需要当面核实。其一，列宽是百分比：col-md-6 编译后是 flex: 0 0 auto; width: 50%（在 md 媒体查询内），所以列宽跟随容器档位缩放，不是固定像素。其二，一行满 12 列即换行，col-6 写三个，第三个自动落到下一行。其三，间距由行统一发放：g-3、g-md-5 控制行内与行间的沟槽宽，默认每档 24px，列自己永远不写 margin——这是栅格与手写布局最大的纪律差异。

证据链第二环：四个高频嫌疑类

<!-- 嫌疑一：col 不带数字 = 按内容自动分宽，等分则用 row-cols -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-2">
  <div class="col">等分卡片 1：lg 起 4 个一行</div>
  <div class="col">等分卡片 2：md 区间 2 个一行</div>
  <div class="col">等分卡片 3：手机 1 个一行</div>
  <div class="col">等分卡片 4</div>
</div>

<!-- 嫌疑二：offset 右移空档 -->
<div class="row">
  <div class="col-md-4 offset-md-4 offset-lg-8 col-lg-4">md 起居中块，lg 起贴右</div>
</div>

<!-- 嫌疑三：order 视觉重排（DOM 顺序不变） -->
<div class="row">
  <div class="order-md-2 col-md-6">手机第一块；md 起视觉第二</div>
  <div class="order-md-1 col-md-6">手机第二块；md 起视觉第一</div>
</div>

<!-- 嫌疑四：嵌套栅格，内层 row 重新从 12 列起算 -->
<div class="row">
  <div class="col-md-8">
    外层 8 列
    <div class="row">
      <div class="col-6">内层按外层宽度的一半</div>
      <div class="col-6">内层同样一半</div>
    </div>
  </div>
</div>
​

四个类的裁决口径：row-cols-* 管「一行强制几列」，比逐列写 col-md-6 省字符且语义清楚；offset 制造空列，常用于居中与错位构图；order 只改视觉顺序、不改 DOM 顺序——手机上想让主内容先于侧栏出现、桌面上侧栏居左，就用它；嵌套时内层 row 的 12 列是外层列宽的 12 列，与全局无关。

案例：三栏新闻页全程断案

背景：某新闻频道页，设计稿要求——手机：头条竖排、三条要闻竖排；平板（md 起）：要闻两列；桌面（lg 起）：左侧作者栏 2 列、正文 7 列、右侧热榜 3 列。

操作：

<div class="container">
  <!-- 头条：全断点通栏 -->
  <div class="row mb-3">
    <div class="col-12">
      <div class="p-4 bg-body-tertiary border rounded">头条：col-12，全区间整行</div>
    </div>
  </div>
  <!-- 主体三块：先按手机顺序书写（正文最前），再逐断点重排 -->
  <div class="row g-3">
    <div class="col-12 order-md-2 col-lg-7 order-lg-1">
      <div class="p-3 bg-body-tertiary border rounded">正文流：手机首位；lg 起视觉居中</div>
      <div class="row mt-2">
        <div class="col-12 col-md-6">要闻块 A：md 起两列之一</div>
        <div class="col-12 col-md-6">要闻块 B</div>
      </div>
    </div>
    <div class="col-12 order-md-1 col-lg-2 order-lg-0">
      <div class="p-3 bg-body-tertiary border rounded">作者栏：md 起先于正文；lg 起最左</div>
    </div>
    <div class="col-12 col-lg-3">
      <div class="p-3 bg-body-tertiary border rounded">热榜：lg 起右栏</div>
    </div>
  </div>
</div>
​

结果：拖动视口复核——xs：头条、正文流、作者栏、热榜依次竖排；md：作者栏与正文流换位，正文内要闻变两列；lg：2/7/3 三栏成型，order-lg-0（等于默认序）让书写顺序与视觉顺序重新对齐。

解读：这个案子有三个值得复述的判决。第一，DOM 按最窄断点的阅读顺序书写，宽屏再视觉重排——对窄屏用户与朗读器都更友好。第二，order-lg-0 是「撤销重排」的技巧，md 区间的换位在 lg 起被显式归零。第三，要闻两列是「嵌套栅格」，12 列的账在内层重算，不与外层的 2/7/3 冲突。

变式：热榜要在 md 区间也露面并占 4 列？给第三块改成 col-12 col-md-4 col-lg-3，同时把正文流的 col-lg-7 前移为 col-md-8——注意 2/7/3 在 md 区间变成 4/8 还剩 0 列，作者栏必须让位改 col-md-12，一笔改动牵三块，这正是 12 列「总量守恒」的约束力。

💡 关键直觉：栅格断案本质是「十二个单位的预算分配」。每行预算 12，谁多占谁就得有人让，offset 与 order 不花预算但改变座次；改需求时先重算预算表，再动类名。

结案要点

• 行满 12 列自动换行；列宽是相对容器的百分比，间距由 g-* 统一发放；
• row-cols-*、offset-*、order-*、嵌套 row 是四个高频裁决工具，各管行数、空位、座次、内部再分配；
• DOM 按最窄断点书写、宽屏用 order 重排，是内容优先的经典判决；
• 预算思维：每行 12 个单位，改动前先重算总量。下一节看列内与行内的微调权——flex 工具类。