不能全局设 max-width，因为 Bootstrap 的 .container 宽度由多级媒体查询阶梯控制：小屏下无断点规则会强制撑宽引发横向滚动，大屏下又被更高优先级的原生断点规则覆盖失效；正确做法是按版本断点用 @media 精准覆盖或 Sass 中重定义 $container-max-widths 变量。
直接写 .container { max-width: 1400px } 会破坏响应式逻辑——小屏强制撑宽引发横向滚动，大屏又被 Bootstrap 原生媒体查询覆盖失效。
为什么不能全局设 max-width
Bootstrap 的 .container 宽度不是单条 CSS 决定的，而是靠一组 @media (min-width: ...) 规则阶梯生效：
- 小屏（如 iPhone 竖屏 ≈390px）下，你写的无断点规则意外生效，把容器硬设为
1400px，触发横向滚动 - 大屏（如 ≥1200px）下，Bootstrap 原生的
@media (min-width: 1200px)规则优先级更高，你的规则被覆盖，压根不生效 - 加
!important更糟：所有断点统一变成同一宽度，彻底失去响应能力
CDN 项目：用媒体查询精准覆盖指定断点
这是引入 bootstrap.min.css 时最稳妥的做法，关键在“断点对齐”和“加载顺序”：
- 确认你用的 Bootstrap 版本断点值：v5.3+ 是
xl: 1200px、xxl: 1400px；v4.x 只有xl: 1200px，没有xxl - 自定义 CSS 文件必须放在
bootstrap.min.css之后加载 - 只覆盖你需要的断点，例如把
xl断点（≥1200px）从默认1140px改为1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
- 若还要适配 2K 屏（≥1400px），同步加
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，否则不生效
最容易被忽略的父容器影响
即使你改对了所有断点，父容器的 padding 或 overflow: hidden 仍会让容器视觉上“变窄”，但实际 max-width 没变——这种问题在嵌套布局或第三方 UI 组件中尤其隐蔽，调试时务必检查 computed style 中最终生效的是哪一条 max-width 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
