直接修改 .container { max-width: 1200px } 不生效且引发横向滚动，因 Bootstrap 依赖多断点 @media 规则；须按版本查清默认断点（如 BS5.3+ 含 xxl），通过后加载自定义媒体查询或 Sass 中重定义 $container-max-widths 并严格匹配键名与顺序。
直接改 .container { max-width: 1200px } 不生效，还会让手机屏横向滚动——因为 Bootstrap 的宽度是靠多条 @media 规则分断点控制的，不是单条 CSS 能覆盖的。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和默认 max-width 值不同，改错就白忙：
- Bootstrap 5.3+ 默认有
xl（≥1200px →1140px）和xxl（≥1400px →1320px） - Bootstrap 4 没有
xxl，只有xl（≥1200px →1140px），想撑到 1400px 必须额外定义断点 -
xs断点没有媒体查询，是兜底值（100%），所有未被更高断点匹配的场景都走它 - 别靠 DevTools 里看到的“当前生效值”反推断点——它只表示哪条
@media被命中，不是区间边界
用自定义 CSS 覆盖指定断点的 max-width
这是 CDN 或已编译 CSS 环境下最常用、最安全的方式，但必须满足三个硬性条件：
- 你的 CSS 文件必须在
bootstrap.min.css之后加载 - 媒体查询条件必须严格匹配原断点，比如
@media (min-width: 1200px)，不能写成1199px或1201px - 不要加
!important——只要选择器是.container且顺序对，就能干净覆盖
例如把 xl 断点（≥1200px）下的宽度从默认 1140px 扩到 1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
如果还要适配 2K 屏（≥1920px），再加一条：
@media (min-width: 1920px) {
.container {
max-width: 1600px;
}
}
重定义 $container-max-widths 变量（Sass 项目）
这是最彻底的方式，但极易静默失效——编译不报错，但检查 computed style 就会发现宽度根本没变：
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名必须完整且拼写严格为
xs、sm、md、lg、xl、xxl，缺一个或写成xxxl就回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点
例如只调大 xl 和 xxl：
$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
如果你新增了自定义断点（比如 xxxl），必须同步更新 $grid-breakpoints 和 $container-max-widths，否则不生效。
最容易被忽略的是：改完后没验证是否真生效——打开不同宽度的浏览器窗口，用 DevTools 检查 .container 的 computed max-width 值，而不是只看 CSS 规则是否被加。
