bootstrap容器宽度需按版本断点精准覆盖：5.3+支持xxl（≥1400px），4版需自定义；css方式须媒体查询严格匹配且后加载，sass方式须在变量导入顺序正确并用map-merge更新。
直接写 .container { max-width: 1400px } 不行，小屏会横向滚动，大屏可能根本没生效——因为 Bootstrap 的容器宽度由断点媒体查询控制，不是单条 CSS 规则。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和默认宽度不同，改错数值就白忙：
- Bootstrap 5.3+ 默认有
xl（≥1200px →max-width: 1140px）和xxl（≥1400px →max-width: 1320px） - Bootstrap 4 没有
xxl，只有xl（≥1200px），想撑到 1400px 宽必须额外定义断点 - 别靠 DevTools 里看到的“当前生效值”反推断点——它只表示哪条
@media被命中，不是区间边界
@media 覆盖指定断点（CDN / 已编译 CSS 环境）
这是最常用、最安全的方式，但必须满足三个硬性条件：
- 自定义 CSS 文件必须在
bootstrap.min.css之后加载 - 媒体查询条件必须严格匹配，比如
@media (min-width: 1200px)，不能写成 1199px 或 1201px - 不要加
!important——只要选择器是.container且顺序对，就能干净覆盖
例如把 xl 断点（≥1200px）下的宽度从默认 1140px 扩到 1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
如果还要适配 2K 屏（≥1920px），再加一条：
@media (min-width: 1920px) {
.container {
max-width: 1600px;
}
}
重定义 $container-max-widths 变量（Sass 项目）
这是最彻底的方式，但极易静默失效——编译不报错，但检查 computed style 就会发现宽度根本没变：
- 必须在
@import "bootstrap/scss/functions"和@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，否则不生效。
最容易被忽略的是：改完后没验证是否真生效——打开不同宽度的浏览器窗口，用 DevTools 检查 .container 的 computed max-width 值，而不是只看 CSS 规则是否被加载。
