直接写 .container { max-width: 1200px } 无效且引发横向滚动，因绕过 bootstrap 断点媒体查询链：大屏被原生 @media (min-width: 1200px) 覆盖不生效，小屏却强制应用导致溢出；!important 更破坏响应式。
直接写 .container { max-width: 1200px } 为什么无效还导致手机横向滚动
因为你绕过了 Bootstrap 的断点媒体查询链。Bootstrap 的 .container 宽度不是单条 CSS 控制的，而是靠一组 @media (min-width: ...) 规则阶梯生效：大屏下你的规则被原生 @media (min-width: 1200px) 覆盖，压根不生效；小屏（如 iPhone 竖屏 ≈390px）下却强制生效，把容器撑到 1200px，触发横向滚动。!important 更糟——所有断点都变成同一宽度，响应式彻底失效。
CDN 项目：用媒体查询精准覆盖指定断点
这是引入 bootstrap.min.css 时最稳妥的做法，关键在“断点对齐”和“加载顺序”：
- 确认你用的 Bootstrap 版本断点值：v5.3+ 是
xl: 1200px、xxl: 1400px；v4.x 只有xl: 1200px，没有xxl - 自定义 CSS 文件必须放在 Bootstrap CSS 之后加载
- 只覆盖你需要的断点，例如把
xl断点（≥1200px）从默认 1140px 改为 1280px：@media (min-width: 1200px) {<br> .container { max-width: 1280px; }<br>} - 若还要适配 2K 屏，同步加
xxl断点：@media (min-width: 1400px) {<br> .container { max-width: 1440px; }<br>} - 不要写
div .container这类降权选择器，保持.container简洁即可
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但极易静默失效——编译不报错，但检查 computed style 就会发现宽度根本没变：
- 变量重定义语句必须放在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前 -
$container-max-widths必须包含全部 key：xs、sm、md、lg、xl、xxl，缺一个，对应断点就会回退到默认值 - 如果新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效 - 推荐用
map-merge只改局部，避免漏掉其他断点：$container-max-widths: map-merge($container-max-widths, (<br> xl: 1280px,<br> xxl: 1440px<br>));
别忽略断点键名和版本差异
v4 和 v5 的断点命名和阈值不同，改错就白忙：
- v5.3+ 默认值：
sm（≥576px）→540px，md（≥768px）→720px，lg（≥992px）→960px，xl（≥1200px）→1140px，xxl（≥1400px）→1320px - v4.x 没有
xxl，只有xl（≥1200px）→1140px - 别拿 DevTools 里看到的“当前生效值”反推断点范围——它只表示“哪条
@media被命中”，不是区间 - 低于 v5.1.0 的版本可能不支持
map-merge或静默回退，默认值不变
xs 或拼错 xxl，整个断点链就断了，但浏览器不会报错，你只能靠 computed style 逐个比对。
