直接写 .container { max-width: 1400px } 无效且导致手机横向滑动，因其无媒体查询，在大屏下被 Bootstrap 原生断点规则（如 @media (min-width: 1200px)）覆盖，小屏下却强制撑宽至 1400px 引发溢出；正确做法是按断点用媒体查询精准覆盖或 Sass 重定义 $container-max-widths 变量。
直接写 .container { max-width: 1400px } 会破坏响应式逻辑，小屏下内容横向溢出；必须按断点用媒体查询覆盖，或 sass 重定义变量。
为什么 .container { max-width: 1400px } 无效还导致手机滑动
Bootstrap 的 .container 宽度不是单条 CSS 控制的，而是靠一组 @media (min-width: ...) 规则阶梯生效。你写的无断点规则：
- 在大屏下被原生媒体查询规则（如
@media (min-width: 1200px)）直接覆盖 - 在小屏下却意外生效，强制把手机竖屏（≈390px 宽）撑到 1400px，触发横向滚动
- 加
!important会让所有断点都变成 1400px，彻底失去响应能力
CDN 项目：用媒体查询精准覆盖指定断点
适用于引入 bootstrap.min.css 的项目，关键在“断点对齐”和“加载顺序”：
- 自定义 CSS 文件必须放在 Bootstrap CSS 之后 加载
- 断点值必须严格匹配你用的 Bootstrap 版本（v5.3+ 是
xl: 1200px、xxl: 1400px） - 只改你需要的断点，例如把大屏宽度从 1140px 扩到 1280px：
@media (min-width: 1200px) {
.container { max-width: 1280px; }
}
@media (min-width: 1400px) {
.container { max-width: 1440px; }
}
- 不要写
div.container这类降权选择器，保持.container简洁即可 - 不加
!important——只要顺序对、断点准，就能干净覆盖
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但只适用于你自己编译 Bootstrap（如 Webpack + sass-loader）：
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名（
sm、md、lg、xl、xxl）一个都不能拼错，缺一个就会回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点：
$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
- 如果新增了断点（比如自定义
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效
局部突破需求：用 .container-fluid 套内层限宽容器
当只要 Banner、全宽图表等某一块区域突破默认宽度，其他地方保持原样时：
-
.container-fluid本身是width: 100%，无任何max-width - 它必须配
margin: 0 auto和显式max-width才能居中限宽，否则只是左对齐撑满 - 示例（视觉上等效于定制版
.container）：
.container-fluid.custom-max {
max-width: 1400px;
margin: 0 auto;
}
- 这种组合不会影响全局
.container行为，零副作用，兼容所有 Bootstrap 5 版本
最容易被忽略的是断点版本差异：v4 的 xl 是 ≥1200px，v5.3+ 的 xxl 是 ≥1400px，且默认值不同（v5.3+ xxl 默认 1320px，不是 1400px）。查错第一件事，就是打开 DevTools 的 Computed 面板，看当前屏幕下到底哪条 max-width 规则胜出了。
