直接改 .container 的 max-width 会失效，因其被 bootstrap 4 媒体查询中更具体的断点规则覆盖；应通过自定义媒体查询覆盖对应断点的 max-width，或用 .container-fluid + 内层 .container 实现局部宽度突破。
为什么直接改 .container 的 max-width 会失效？
因为 bootstrap 4 的 .container 类本身已用 max-width 做了断点响应（如 md: 540px、lg: 960px），如果你只在 html 里加 style="max-width: 1200px"，它会被 css 中更具体的媒体查询规则覆盖——尤其在大屏下，你的内联样式根本没机会生效。
常见错误现象：
– 在 xl 屏幕下容器还是卡在 1140px
– 加了 !important 临时起效，但破坏响应逻辑，移动端也变宽了
– 用 mx-auto + width 拼凑，结果居中失效或溢出
推荐方案：用自定义 CSS 覆盖断点级 max-width
最稳妥的方式是复写 Bootstrap 的断点变量，不碰源码也能生效。你只需在引入 Bootstrap CSS 后，加一段自定义样式：
@media (min-width: 1200px) {
.container {
max-width: 1320px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* 其他断点按需补全，或只改你需要的那一个 */
使用场景：
– 需要统一调整全站容器宽度
– 不想重编译 Sass，又希望保留响应行为
– 团队协作中避免“谁加个 !important 谁赢”的混乱
进阶选择：用 .container-fluid + 内部 .container 组合控制
当你要局部突破默认宽度（比如首页 banner 宽屏，但正文仍需限制），不要硬改全局 .container，而是用嵌套结构：
<div class="container-fluid bg-light">
<div class="container py-5">
<h2>这个区域最大宽度仍是 1140px</h2>
</div>
</div>
这样既保持语义清晰，又避免副作用：
– .container-fluid 撑满视口，适合背景、遮罩等视觉层
– 内层 .container 仍走标准断点，内容可读性不受影响
– 不需要额外 CSS，兼容所有 Bootstrap 4 版本（包括 CDN 引入）
别踩坑：慎用 mw- 工具类替代容器宽度
Bootstrap 4 并没有 mw-1200 这类工具类（那是 Bootstrap 5+ 才有的）。网上有些教程让你写 class="mw-100" 或 mw-500，在 v4 中完全无效——它压根不存在。
容易混淆的点：
– .w-100 是设 width=100%，不是 max-width
– .mx-auto 需配合明确 width 才能居中，单独用没用
– 自定义类名如 .my-container 如果没声明 margin: 0 auto，也不会居中
复杂点在于：容器宽度不是孤立属性，它和栅格列数、gutter 间距、断点阈值是一整套联动系统。改一个，最好确认其他地方是否还对得上——比如你把 xl 断点的容器提到 1400px，但列宽没调，.col-lg-12 可能就撑不满一行了。
