直接写 .container { max-width: 1400px } 会破坏响应式，因绕过 Bootstrap 断点逻辑：大屏被覆盖不生效，小屏强制生效致横向滚动；正确做法是按断点精准覆盖或重定义 Sass 变量。
直接写 .container { max-width: 1400px } 不起作用，还会让手机页面出现横向滚动——因为它绕过了 bootstrap 的断点逻辑，既没匹配任何媒体查询条件，又在小屏下意外生效。
为什么无断点的 max-width 会破坏响应式
Bootstrap 的 .container 宽度不是单条 CSS 控制的，而是靠一组 @media (min-width: ...) 规则阶梯生效。你写的无断点规则：
- 在大屏下被原生媒体查询（比如
@media (min-width: 1200px)）直接覆盖，压根不生效 - 在小屏（如 iPhone 竖屏 ≈390px）下却强制生效，把容器撑到 1400px，触发横向滚动
- 加
!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) { .container { max-width: 1280px; } } - 若还要适配 2K 屏，同步加 xxl 断点：
@media (min-width: 1400px) { .container { max-width: 1440px; } } - 不要写
div .container这类降权选择器，保持.container简洁即可
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但极易静默失效——编译不报错，但检查 computed style 就会发现宽度根本没变：
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名必须严格为
xs、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，否则不生效
别踩这些坑
最容易被忽略的是：Sass 变量覆盖失败时没有任何提示，页面看起来“好像正常”，但实际宽度没变。顺序错、键名错、漏断点，都会导致静默回退到默认值。真要验证，得打开 DevTools 的 Computed 面板，逐条看哪条 max-width 被最终应用——而不是只看 Elements 里写了什么。
