直接写 .container { max-width: 1400px } 会破坏响应式，因无媒体查询导致小屏横向滚动、大屏被bootstrap原生规则覆盖；正确做法是用匹配断点的@media精确覆盖或sass中用map-merge重定义$container-max-widths变量。
直接写 .container { max-width: 1400px } 会破坏响应式，别这么干
这条规则没带任何媒体查询，浏览器会把它强加给所有屏幕——iPhone竖屏（≈390px）下也硬撑到1400px，必然触发横向滚动；而大屏下，Bootstrap原生的@media (min-width: 1200px)规则优先级更高，你的设置根本不会生效。加!important更糟：小屏和大屏全被钉死在同一宽度，彻底废掉断点逻辑。
CDN项目用@media精准覆盖断点，必须对齐版本和加载顺序
这是最常用也最稳妥的方式，但三个条件缺一不可：
- 先查清你用的 Bootstrap 版本断点值：
v5.3+是xl: 1200px、xxl: 1400px；v4.x只有xl: 1200px，没有xxl - 自定义 CSS 文件必须放在
bootstrap.min.css之后加载（否则规则压根不生效） - 媒体查询条件必须严格匹配，比如写
@media (min-width: 1200px)，不能是1199px或1201px
例如把 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变量，顺序和键名容错率极低
这是官方推荐方式，但极易静默失效——编译不报错，DevTools里却看不到变化：
- 重定义语句必须放在
@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，否则不生效。
别忽略父容器的padding或overflow: hidden
改完后看着宽度对了，但实际内容被“视觉压缩”——常见原因是外层父容器设置了 padding 或 overflow: hidden，导致 .container 的可用空间变窄。这不是 Bootstrap 的问题，但容易被当成配置失败。真要验证是否生效，得在不同宽度窗口下打开 DevTools，逐级检查 .container 的 computed max-width 值，而不是只看 HTML 结构或样式面板里的声明行。
