必须按断点精准控制.container宽度：@media需严格匹配bootstrap版本断点且css文件加载顺序正确；sass中重定义$container-max-widths变量须在导入variables后、container前，用map-merge安全修改。
.container { max-width: 1400px } 会破坏响应式——小屏下强制撑宽引发横向滚动，大屏下又被 Bootstrap 原生媒体查询覆盖而失效。必须按断点精准控制。
@media 覆盖指定断点（CDN / 已编译 CSS 环境）
这是最常用、也最容易出错的方式。关键不是“加一条规则”，而是复现 Bootstrap 的断点逻辑并确保加载顺序正确：
- 自定义 CSS 文件必须放在
bootstrap.min.css之后加载，否则规则压根不生效 - 媒体查询条件必须严格匹配你用的 Bootstrap 版本断点值：v5.3+ 是
@media (min-width: 1200px)（xl）、@media (min-width: 1400px)（xxl）；v4 只有 xl（1200px），没有 xxl - 不要写
div .container或.container !important——选择器越简洁、权重越低反而越安全，只要顺序对就能干净覆盖 - 例如把 xl 断点（≥1200px）下的宽度从默认 1140px 改为 1280px：
@media (min-width: 1200px) {<br> .container { max-width: 1280px; }<br>}
$container-max-widths 变量重定义（Sass 项目）
这是最彻底的方式，但极易静默失败——编译不报错，浏览器里检查 computed style 却发现宽度根本没变：
- 变量赋值语句必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前，顺序错就无效 - 键名必须完整且拼写严格为
xs、sm、md、lg、xl、xxl，缺一个或写成xxxl，对应断点就会回退到默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点：$container-max-widths: map-merge($container-max-widths, (<br> xl: 1280px,<br> xxl: 1440px<br>));
- 如果新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则断点不触发
为什么改完后看不到效果？
常见现象是 DevTools 显示规则已加载，但容器宽度纹丝不动。问题往往不在代码本身，而在验证环节：
- 别只看“当前窗口宽度”下的 computed style——手动缩放浏览器窗口，观察不同断点（比如 1199px、1200px、1399px、1400px）下
.container的max-width是否真正切换 - 检查父容器是否设置了
padding或overflow: hidden，它们会让内容区域视觉上“变窄”，但实际max-width已生效 - v5.0.x 等旧版本可能不支持
$container-max-widths变量名，编译无报错但无效——最终得靠 DevTools 查max-width的计算值确认
要不要用 .container-fluid 替代？
当只需要某一块区域（比如 Banner、全宽图表）突破默认宽度时，硬改全局 .container 是最危险的选择：
-
.container-fluid默认是width: 100%，无任何max-width，也不响应断点 - 给它加
max-width必须配margin: 0 auto才能居中，否则即使设了宽度，内容仍左对齐、右侧留白 - 示例：
.container-fluid.custom-max {<br> max-width: 1400px;<br> margin: 0 auto;<br>} - 加了
max-width后，.container-fluid就失去了“流体”语义，实际行为接近定制版.container
.container 的 max-width 计算值，而不是只盯着某一个尺寸看。
