直接写 .container { max-width: 1400px } 无效，因 Bootstrap 的容器宽度由媒体查询控制，该规则无断点、优先级低且在小屏下强制宽导致溢出；正确做法是用对应断点的 @media 覆盖或 Sass 变量重定义。
直接写 .container { max-width: 1400px } 为什么无效
因为 Bootstrap 的 .container 宽度由一组媒体查询控制，不是单条 CSS 规则。你写的这条样式没有媒体查询，优先级低于 Bootstrap 自带的 @media (min-width: 1200px) { .container { max-width: 1140px; } }，浏览器直接忽略它。更糟的是，它会在所有屏幕尺寸下生效——小屏也强制 1400px，导致内容横向溢出、页面可左右滑动。
纯 CSS 覆盖必须用对应断点的 @media
适用于 CDN 引入 bootstrap.min.css、没走 Sass 编译的项目。关键有三点：
- 把自定义 CSS 放在 Bootstrap CSS 文件 之后 加载
- 选择器保持简洁，别写成
div.container（会降权） - 只覆盖你要改的断点，例如扩大大屏宽度：
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1600px;
}
}
不要加 !important——只要加载顺序对、选择器没降权，就能干净覆盖。
Sass 方案：重定义 $container-max-widths 变量
这是最彻底、可维护性最高的方式，但只适用于你自己编译 Bootstrap（如 Webpack + sass-loader）。必须严格满足两个条件：
立即学习“前端免费学习笔记（深入）”；
- 在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 变量必须包含全部断点键名，缺一个就会回退到 Bootstrap 默认值
推荐只改某一项，避免误伤其他断点：
$container-max-widths: map-merge($container-max-widths, (xl: 1400px));
如果要新增 xxl 以上断点（比如适配 2K 屏），还需同步更新 $grid-breakpoints，否则新断点不触发。
别用 style="max-width: ..." 或 .container-fluid 混搭
内联样式优先级仍敌不过媒体查询，且破坏响应逻辑；.container-fluid 是全宽（width: 100%），没有 max-width，不能“加大一点”，只能“全宽”。真要局部突破，用组合：
-
<div class="container-fluid px-0"><div class="container">...</div></div>—— 外层撑满，内层保断点 - 避免给
.container加width、margin或!important，这些会干扰栅格系统计算
最容易被忽略的点：Sass 变量覆盖失败时，编译不报错，页面看起来“好像正常”，但检查 computed styles 会发现 max-width 还是默认值——务必用浏览器开发者工具验证最终渲染结果。
