直接修改 .container 的 max-width 无效，因被 Bootstrap 媒体查询覆盖；内联 style="max-width:1400px" 优先级低且破坏响应式；正确方案是用媒体查询覆盖对应断点、Sass 重定义 $container-max-widths 变量，或局部使用 .container-fluid + 内层限宽。
直接改 .container 的 max-width 行不通，因为会被 Bootstrap 自带的媒体查询规则覆盖——尤其在大屏下，你写的那条样式根本没机会生效。
为什么 style="max-width: 1400px" 在 HTML 里不生效
Bootstrap 4+ 所有断点宽度都靠 max-width + 媒体查询控制，比如 @media (min-width: 1200px) { .container { max-width: 1140px; } }。你在元素上写内联 max-width，优先级低于这些带媒体查询的规则，更别说它只在特定视口宽度下才起作用。
- 小屏（如
sm）下你的 1400px 会强制撑满，内容横向溢出 - 加
!important能临时压住，但会让所有断点都变成 1400px，响应式逻辑彻底失效 - 用
.w-100或.mw-100没用：前者是width: 100%，后者在 Bootstrap 4 中根本不存在
纯 CSS 方案：用媒体查询覆盖对应断点
适用于 CDN 引入、没走 Sass 编译的项目。关键是把自定义样式放在 Bootstrap CSS 之后加载，并精准匹配断点阈值。
- 只改 xl 屏（≥1200px）：
@media (min-width: 1200px) { .container { max-width: 1400px; } } - 同时兼容 xxl（≥1400px）：
@media (min-width: 1400px) { .container { max-width: 1600px; } } - 不要用
!important——只要选择器没降权（比如别写成div.container），且 CSS 文件加载顺序正确，就能覆盖
Sass 方案：重定义 $container-max-widths 变量
这是最干净的方式，但只适用于你自己编译 Bootstrap 的场景（比如用 Webpack + sass-loader）。必须在导入 container 模块前完成重赋值。
- 完整覆盖所有断点（缺一个会导致回退默认值）：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1400px, xxl: 1600px );
- 只改某一个断点（推荐）：
$container-max-widths: map-merge($container-max-widths, (xl: 1400px));
- 注意同步检查
$grid-breakpoints，否则断点存在但容器不响应（比如你设了xxl: 1600px，但$grid-breakpoints里没有xxl键，那这条就无效）
局部突破：用 .container-fluid + 内层限宽
当只要某一块区域（比如首页 banner、全宽图表）突破默认宽度，其他地方保持原样时，硬改全局 .container 是最危险的选择。
- 结构写法：
<div class="container-fluid"> <div class="container py-5" style="max-width: 1400px;"> <h2>内容仍受标准断点约束</h2> </div> </div> -
.container-fluid撑满视口，适合做背景、遮罩、渐变等视觉层 - 内层
.container或带style="max-width: ..."的 div 保留语义和居中逻辑，不影响栅格对齐 - 完全不依赖 CSS 覆盖或 Sass 编译，CDN 用户也能立刻用
真正容易被忽略的是：改容器宽度不是“调个数值”那么简单——你要先分清这是内容承载需求（比如正文可读性上限），还是视觉留白需求（比如 banner 需要呼吸感）。前者该动 $container-max-widths，后者更适合用 .container-fluid 包一层再内嵌限宽。
