直接修改 .container 的 max-width 无效，因 bootstrap 用媒体查询阶梯控制宽度；小屏会强制拉宽导致横向滚动，加 !important 则破坏全部响应逻辑；应通过精准媒体查询覆盖或 sass 变量重定义实现。
.container 的 max-width 行不通——小屏会横向溢出，大屏又被 Bootstrap 原生媒体查询覆盖，最终宽度纹丝不动。
为什么 .container { max-width: 1400px } 无效还导致手机滑动
Bootstrap 的 .container 宽度由一组带 @media 的断点规则阶梯控制，不是单条 CSS 决定的。你写的无断点样式：
- 在 ≥1200px 屏幕下，被
@media (min-width: 1200px)规则直接覆盖 - 在手机竖屏（≈390px）下却意外生效，强制拉宽到 1400px，触发横向滚动条
- 加
!important会让所有断点都变成 1400px，响应式逻辑彻底失效
CDN / 已编译 CSS 环境：用媒体查询精准覆盖
这是最常用也最安全的方式，但必须满足三个硬性条件：
- 自定义 CSS 文件必须放在
bootstrap.min.css之后加载 - 媒体查询条件必须严格匹配你用的 Bootstrap 版本断点值（v5.3+ 是
@media (min-width: 1400px)对应 xxl） - 只改你需要的断点，不碰其他，避免破坏响应阶梯
例如把 xxl 断点（≥1400px）下的宽度从默认 1320px 改为 1440px：
@media (min-width: 1400px) {
.container {
max-width: 1440px;
}
}
如果还要适配 2K 屏（≥1920px），再加一条：
@media (min-width: 1920px) {
.container {
max-width: 1600px;
}
}
Sass 项目：重定义 $container-max-widths 变量
这是最干净的方式，但极易静默失败——浏览器不报错，DevTools 里也看不出问题，宽度就是不变。
- 赋值语句必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前 - 键名必须完整且拼写严格为
xs、sm、md、lg、xl、xxl，漏一个或写成xxxl，对应断点就回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点
例如只调大 xxl 断点：
$container-max-widths: map-merge($container-max-widths, ( xxl: 1440px ));
如果你新增了自定义断点（比如 xxxl），必须同步更新 $grid-breakpoints 和 $container-max-widths，否则断点不触发。
最容易被忽略的验证点
别只看当前窗口宽度下的 computed style——手动缩放浏览器，分别停在 1199px、1200px、1399px、1400px 这几个临界点，检查 .container 的 max-width 是否真正切换；同时确认页面实际用的是 .container，而不是 .container-fluid，后者压根不走这套断点逻辑。
