3. 栅格系统：12 列与断点

这是什么：栅格系统 = Bootstrap 把一行横向切成 12 等份，用 col-* 类声明每个盒子占几份，再靠断点前缀决定不同屏幕下占几份。

为什么用：上一章你会照抄 col-md-4 了，但真做页面时问题会多起来——侧栏 3 列 + 正文 9 列怎么拼？为什么手机上顺序不对？md 换成 lg 会怎样？把「12 列 + 6 断点」这两个参数吃透，全站的布局就都能口算出来。

如何用：本章每段示例都可运行，边拖窗口边看断点处的变化。

3.1 12 列：一行怎么切

row 里放 col-*，数字相加 ≤ 12 就并排，超过 12 自动换行——Flex 换行行为，CSS 教程第 6 章讲过：

写法	一行占法	常见场景
`col-6` × 2	6+6	两栏
`col-4` × 3	4+4+4	三栏卡片
`col-3` × 4	3+3+3+3	仪表盘小卡
`col-8` + `col-4`	正文+侧栏	博客布局
`col-12`	独占一行	通栏大图

3.2 六个断点：前缀决定「从多宽开始生效」

Bootstrap 5 按视口宽度定义 6 档，类名里的前缀表示从这一档开始（含）生效：

前缀	屏幕	视口宽度	记忆
无前缀（`col-6`）	超小（手机）	< 576px 也生效	永远生效
`sm`	小	≥ 576px	大手机
`md`	中	≥ 768px	平板竖屏起
`lg`	大	≥ 992px	笔记本起
`xl`	超大	≥ 1200px	大显示器
`xxl`	超超大	≥ 1400px	v5 新增

关键规则：断点是「向上生效、自动继承」。col-md-4 的意思是「≥768px 时占 4 列」，那么 992px、1400px 时它仍是 4 列——除非你用更高前缀覆盖：

<!-- 手机竖屏独占一行 → 平板起三列 → 桌面起六列 -->
<div class="row">
  <div class="col-12 col-md-4 col-lg-6">…</div>
</div>

这和 CSS 媒体查询「从小到大逐步覆盖」的思路一致；Bootstrap 帮你把断点数值统一了，全站一致不会出现「你的 768 我的 800」。

3.3 自动列宽与等分列

数字也常常不用写：

<div class="row">
  <!-- 三个 col：不管几个，永远平分一行 -->
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

<div class="row">
  <!-- col-auto：宽度由内容撑开，适合放 logo、按钮组 -->
  <div class="col-auto">自适应</div>
  <div class="col">我吃掉剩余全部宽度</div>
</div>

col（不带数字）：同一行的 col 均分 12 份
col-auto：内容多宽我多宽，剩下宽度让给兄弟列
col + col-6 混用：col-6 拿 6 份，两个 col 平分剩下的 6 份

3.4 对齐：把 Flex 属性「类名化」

row 本身是 flex 容器，CSS 教程第 6 章的属性全有对应类：

手写 CSS	Bootstrap 类	作用
`justify-content: center`	`justify-content-center`	水平居中
`align-items: center`	`align-items-center`	垂直居中
`text-align: center`	`text-center`	文字居中
`gap: 1rem`	`g-3`（加在 row 上）	列间距

<div class="row justify-content-center g-3">
  <div class="col-md-4">窄屏换行也居中</div>
  <div class="col-md-4">第二块</div>
</div>

g-0～g-5 控制列与列之间的间隙（gap），默认间隙让色块紧贴不好看不说，卡片阴影也会被裁——加 g-3 是很多示例的「标配」。

3.5 一个完整布局：侧栏 + 正文 + 页脚

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>栅格实战</title>
  <link href="https://registry.npmmirror.com/bootstrap/5.3.8/files/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row g-4">
      <aside class="col-12 col-lg-3">
        <div class="p-3 bg-light border rounded">侧栏：手机全宽，lg 起占 3 列</div>
      </aside>
      <main class="col-12 col-lg-9">
        <div class="p-3 border rounded">正文：手机全宽，lg 起占 9 列</div>
      </main>
    </div>
    <div class="row mt-4">
      <div class="col-12 text-center text-muted">页脚独占一行</div>
    </div>
  </div>
</body>
</html>

读法口诀：先写 col-12 兜底手机，再加 col-前缀-数字 安排大屏——这就是「移动优先」的写法。

3.6 常见坑

列直接放 container 里：没有 row 包着，间距和换行都会乱。三层结构缺一不可。
数字和超过 12 还硬塞：会自动换行，但可能不是你想要的断点——宁可拆成两个 row。
忘了 viewport meta：手机上永远显示桌面版（第 2 章讲过）。
col-* 套 col-*：列里想再分栏，内层要重新起 row，不能直接嵌列。

3.7 小结

一行 12 份，col-* 数字 = 占几份，超 12 自动换行
6 个断点：无前缀 / sm / md / lg / xl / xxl，「向上生效、自动继承」
懒得算：col 等分、col-auto 按内容
移动优先写法：col-12 col-lg-3 先手机后桌面

布局会分了，下一章给格子里装内容——导航栏、卡片、按钮这些现成组件。