必须按Bootstrap版本断点精准覆盖.container的max-width：5.3+用xl/xxl媒体查询或重定义$container-max-widths变量，4版需手动加断点，3版仅到lg；CSS须后载、断点值严格匹配、选择器为.container；注意.container-fluid、父容器溢出及居中样式干扰。
直接写 .container { max-width: 1400px } 会破坏响应式逻辑——小屏下强制撑宽导致横向滚动，大屏下又被 Bootstrap 原生媒体查询覆盖而失效。必须按断点精准控制。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和默认宽度不同，改错数值就白忙：
- Bootstrap 5.3+：
xl是@media (min-width: 1200px)（默认max-width: 1140px），xxl是@media (min-width: 1400px)（默认max-width: 1320px） - Bootstrap 4：只有
xl（≥1200px），没有xxl；想支持 ≥1400px 需手动加断点 - Bootstrap 3：断点是
sm（≥768px）、md（≥992px）、lg（≥1200px），默认宽度分别为750px、970px、1170px
别靠 DevTools 里看到的 “当前生效 max-width” 反推断点——它只表示哪条媒体查询被命中，不是区间边界。
CDN / 已编译 CSS 环境：用媒体查询精准覆盖
这是最常用也最容易出错的方式。关键不是“加一条规则”，而是复现断点逻辑并确保加载顺序正确：
- 自定义 CSS 文件必须放在
bootstrap.min.css之后加载，否则规则不生效 - 媒体查询条件必须一字不差，比如
@media (min-width: 1200px)，不能写成1199px或1200.1px - 选择器保持为
.container，不要写成div .container或.container.my-class，避免权重降级 - 不需要
!important——只要顺序对、断点准，就能干净覆盖
例如把 xl 断点（≥1200px）下的宽度从 1140px 改为 1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
若还要适配 2K 屏（≥1400px），再加一条：
@media (min-width: 1400px) {
.container {
max-width: 1440px;
}
}
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但极易静默失败——编译不报错，浏览器里检查 computed style 却发现宽度没变：
- 变量赋值语句必须在
@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，否则断点不触发。
容易被忽略的干扰因素
即使媒体查询或变量都写对了，也可能看不到效果：
- 确认页面实际用的是
.container，而不是.container-fluid（后者无max-width） - 检查父容器是否设置了
overflow: hidden或过窄的padding，会让容器视觉上“变窄” - 检查是否有其他 CSS 意外重置了
margin: 0 auto，否则即使max-width正确，容器也不会居中 - 在 Sass 项目中，如果同时修改了
$grid-breakpoints，但忘了在$container-max-widths中补上新键名，对应断点将完全失效
