第 2 章 布局断案：容器与栅格

第 2 章 · 布局断案：容器与栅格

章节摘要：布局是 Bootstrap 响应式行为的发源地。本章从外到内审四类案件：容器（页面宽度的总闸）、栅格（12 列的证据链）、flex 与 grid 工具类（断点后的微调权）、显示与隐藏工具类（去留的裁决）。读完你能对任何页面截图回答：这个宽度该用哪种容器、这几块内容各占几列、哪个元素该在哪个断点退场。

学习目标

阅读完本章，你应当能够：

1. 背出六个断点的阈值与 container 在各断点的最大宽度（540、720、960、1140、1320）；
2. 用 container、container-fluid、container-{断点} 三类容器为页面选对宽度策略；
3. 用 col-*、offset-*、order-*、row-cols-*、g-* 组合出常见响应式布局；
4. 用 d-flex、justify-content-*、align-items-* 的响应式变体做行列内微调；
5. 用 d-none 与 d-{断点}-inline 系列精确控制元素在各区间的显隐。

核心概念速览

布局四审的次序是铁律：先定容器，再分栅格，再做微调，最后判显隐。次序颠倒，后面的判决会不断被前面的改判冲掉。

子章节导航

2.1 容器断案：断点切换的第一现场

容器是页面的「蓄水池」，它决定了内容区在每个断点的最大宽度。最经典的三栏挤成一列、大屏内容无限拉宽，病根多在容器选错。

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

12 列是 Bootstrap 布局的度量衡。本节审列数分配、等分自动布局、偏移、排序、行内列数限制与嵌套，是全册代码最密的一节。

2.3 Flex 与 Grid 工具类：断点后的微调权

栅格管「谁占几列」，flex 工具管「列内与行内怎么对齐、怎么排」。两者都挂断点前缀，但管辖范围不同，混用常有惊喜。

2.4 响应式工具类：显示与隐藏的裁决

d-none 系列与 order-*、text-start 系的响应式变体，负责元素的去留与次序。观察台角标正是用它造的，本节把原理补全。

子章节之间的逻辑关系

四节由外到内、由粗到细：容器定边界，栅格在边界内分格，flex 在格子内对齐，显隐工具决定格子里的东西何时退场。

2.1 容器定边界 ──► 2.2 栅格分格 ──► 2.3 flex 对齐微调
                        │                    │
                        └────► 2.4 显隐裁决 ◄┘
​

本章知识点清单

逐条可考核，学完本章请自查：

1. 能默写六个断点阈值（576、768、992、1200、1400）与 container 在 sm 到 xxl 各档的最大宽度（540、720、960、1140、1320）；
2. 能为三类典型页面选对容器：营销官网用 container、后台仪表盘用 container-fluid、「窄屏全宽、达档定宽」用 container-md 这类混合策略；
3. 能说清 row 的负 margin 补偿机制，以及为什么列必须放在 row 里、嵌套栅格时内层要再包一层 row；
4. 能把 col-12 col-md-6 col-lg-4 这串阶梯读成「默认整行、平板半行、桌面三分之一行」，并按内容优先级书写覆盖顺序；
5. 能区分 offset 让位、order 重排、row-cols 限行三件位移工具的适用场景；
6. 能解释 g-4 沟槽的本质是「父 row 负 margin、子 col padding」的对冲结构，因此能推断嵌套时沟槽不会叠加爆边；
7. 能划清栅格与 flex 工具的管辖边界：占几列归 col 管，列内对齐与分布归 d-flex 系管；
8. 能用 d-none 与 d-md-inline 写出「手机隐藏、平板起显示、桌面再隐藏」的中区间收回案，并解释其阶梯原理。

前置知识与后续延伸

• 前置知识：第 1 章的观察台与类名三段式读法；CSS 盒模型中 width、max-width、padding 的关系。
• 后续延伸：第 3 章所有组件都长在栅格里，第 4 章工具类是本章 2.3、2.4 的系统化扩展，第 7 章案例是对本章四审的总演练。