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

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

容器（container） 是 Bootstrap 页面最外层的宽度包装器：.container 在每个断点有一个最大宽度并水平居中；.container-fluid 恒为 100% 宽；.container-sm 到 .container-xxl 在指定断点前全宽、之后转为固定档。容器是「断点切换」最直观的第一现场——视口一跨阈值，内容区宽度立刻跳变。

位置：本章由外到内四审的第一审。容器定不下，栅格无从谈起；本节的宽度档位表是 2.2 栅格列宽计算的地基。

一、立案：大屏上正文拉到 1800 像素宽，谁的责任

后台系统全屏 1920px 显示器上，一篇新闻正文每行 90 多个汉字，读三行就串行。检查元素，发现内容直接铺在 container-fluid 里。判：容器选型失当。fluid 适合「工具界面」（表格、看板，信息越宽越好），不适合「阅读界面」（正文行宽有最佳区间，中文约 35 到 45 字）。

图 2-1 三类容器的宽度曲线

二、取证：把三种容器并排拖一遍

<!-- 三个容器叠放，给各自加背景色便于观察边界 -->
<div class="container bg-primary-subtle border py-2 mb-2">
  container：当前档位内 100%，越档封顶居中
</div>
<div class="container-fluid bg-warning-subtle border py-2 mb-2">
  container-fluid：永远占满视口，减去两侧内边距
</div>
<div class="container-md bg-success-subtle border py-2">
  container-md：768px 之前等于 fluid，之后封顶 720px 并居中
</div>
​

用 1.2 节的观察台配合拖动窗口：视口 700px 时前两个容器视觉宽度相同（都在 700 内减内边距），container-md 也相同；跨过 768px 的瞬间，container 与 container-md 同时停止增长并开始居中，container-fluid 继续随窗口变宽。跳变发生在断点上，这正是「断点切换的第一现场」的含义。

三、裁决：容器选型对照

<!-- 嵌套判决：头图出血，正文收拢 -->
<header class="container-fluid px-0">
  <div class="bg-secondary text-white text-center py-5">全宽头图区：背景铺满视口</div>
</header>
<main class="container py-4">
  正文区：越档封顶，行宽保持在阅读区间
</main>
​

解读：px-0 抹掉 fluid 自带的水平内边距，让头图真正贴边；两层容器各司其职，互不干扰。

⚠️ 常见坑：给 .container 手工加 style 内联宽度或 w-100 覆盖最大宽度，会同时破坏封顶与居中两个行为。要改档位宽度，走第 5 章 Sass 变量（container-max-widths）那条正规途径。

四、验算：行宽到底怎么量

「正文太宽读不下去」不该靠感觉判，可以当场验算。行宽的度量单位不是像素，是「每行字符数」：正文区宽度除以字号，就是每行能排下的汉字数。以 lg 档为例：container 封顶 960px，正文列若占 8 列，扣掉沟槽后约 600px 出头；用 16px 正文字号一除，每行约 38 个汉字——恰好落在中文阅读的最佳区间 35 到 45 字之内。这就是为什么默认档位「感觉舒服」：它不是审美玄学，是量出来的。

同理可以复核开头的悬案：1920px 视口下 fluid 正文区约 1870px，除以 16 等于每行 117 字——是最佳区间的近三倍，串行必然发生。反过来，若设计稿要求正文区每行不超过 40 字、字号 15px，倒推正文列宽不超过 600px，再对照档位表就能直接选定容器与列数组合，不必来回试。

验算动作固定三步：在开发工具里选中正文容器读 computed 宽度；除以 computed 字号得每行字数；不在 35 到 45 区间就调容器或列数。这三步在第 7 章工作流的多端验收里是必检项，先在这里练熟。

另一个值得记录的数据是内边距：5.x 的 container 自带左右各 0.75rem（12px）内边距，栅格沟槽的负 margin 正好抵着它工作。理解这一点，后面遇到「内容贴边了」「沟槽 double 了」两类悬案，都能追溯到容器与 row 的这场配合。

顺带把 sm 档单拎出来验一次，因为它是档位表里最反直觉的一行：575px 的 xs 视口里 container 是全宽 575；跨到 576px，sm 条文接管，总宽（含左右内边距）封顶到 540。从 575 拖到 576，容器不升反降，出现一次「负跳变」。在观察台上亲眼盯住这一跳，档位表的「各档最大宽度含内边距」这行小字就再也不会读漏。

变式：需求变了怎么改判

变式一：产品要求「平板及以上内容居中收窄，手机上贴边」。container 在手机上本就 100% 减内边距，直接满足；若嫌两侧 12px 内边距也想去掉，给容器加 px-0 即可，不必换类型。变式二：要求「992px 起固定 960 宽、以下全宽」，这正是 container-lg 的定义，不需要自写媒体查询。变式三：设计稿给出非标准档位（如桌面封顶 1040px），属于改法典级别的问题，记到第 5 章 Sass 定制的账上，容器类本身不提供任意档位。

结案要点

• 三类容器：container 阶梯封顶（540/720/960/1140/1320）、fluid 恒满宽、container-{bp} 前满后封；
• 容器切换发生在断点上，是验证断点行为最直观的「现场」；
• 阅读型页面判给 container，工具型页面判给 fluid，混合需求用嵌套或 container-{bp}；
• 档位宽度不满意时不要内联硬改，留给第 5 章的变量体系。

下一节进入容器内部：12 列栅格怎么分。