直接写 .container { max-width: 1400px } 无效，因被 Bootstrap 媒体查询规则覆盖；正确做法是用对应断点的 @media 覆盖（如 @media (min-width: 1200px) { .container { max-width: 1400px; } }）或 Sass 重定义 $container-max-widths 变量。
如何用 max-width 覆盖 Bootstrap 的默认容器宽度
bootstrap 的 .container 类自带响应式最大宽度（如 lg 断点下是 992px），但你不能直接在 html 里写 style="max-width: 1200px" 来覆盖它——因为 bootstrap 的 css 有更高优先级（类选择器 + !important 在部分版本中存在）。必须用同等或更高权重的 css 规则来覆盖。
- 推荐在自定义 CSS 文件中添加带媒体查询的规则，例如：
@media (min-width: 992px) { .container.custom-max { max-width: 1200px !important; } } - 不要只写
.container { max-width: 1200px }——它会被 Bootstrap 原生规则覆盖（尤其 v5.3+ 使用了!important修饰部分断点） - 如果用的是 Bootstrap 5 的 Sass 源码，更稳妥的方式是重定义
$container-max-widths变量后重新编译，而不是运行时覆盖
为什么 container-fluid 加 max-width 不生效
很多人试过给 .container-fluid 直接加 max-width，发现页面还是撑满全屏。这是因为 .container-fluid 默认只有 width: 100%，没有设置 max-width，但它的子元素（比如 .row）会继承父容器宽度，而浏览器渲染时不会自动“截断”内容流。
- 必须对
.container-fluid本身设max-width，同时配margin: 0 auto居中，否则即使宽度受限，内容仍左对齐并留白在右侧 - 示例：
.container-fluid.custom-max { max-width: 1400px; margin: 0 auto; } - 注意：加了
max-width后，.container-fluid就失去了“流体”语义，实际行为接近定制版.container
使用 container 的断点别名时要注意什么
Bootstrap 提供 .container-sm、.container-md 等类，它们只在对应断点及以上才启用 max-width。如果你希望“仅在桌面端设 1300px，其他设备保持默认”，不能只靠一个类解决。
-
.container-lg在lg（≥992px）生效，宽度是992px；想改成1300px，必须覆盖@media (min-width: 992px)下的规则 - 别漏掉
xl和xxl断点——v5.3 中xxl默认是1400px，若你设的1300px小于它，需额外覆盖@media (min-width: 1400px) - 检查你用的 Bootstrap 版本：v4 的断点键名是
xl（≥1200px），v5 是xxl（≥1400px），CSS 规则位置不同
用内联 style 快速调试时的陷阱
开发阶段用 style="max-width: 1140px" 看起来能临时生效，但上线后大概率失效——尤其是用了 CDN 引入 Bootstrap CSS 且未禁用 JIT 或未开启 important: true 配置时。
- 内联样式虽优先级高，但 Bootstrap 5.3+ 的某些构建版本对
.container使用了!important（尤其在 RTL 或 utility-first 模式下） - Chrome DevTools 里看到“已划掉”的
max-width，说明被更重规则覆盖，此时必须提升选择器权重，比如用.container.custom-max而非单纯.custom-max - 真要内联，得写成
style="max-width: 1140px !important"，但这是反模式，仅限临时验证
xxl 断点的存在，以及 !important 在现代构建流程中的隐式注入。
