应通过重定义 Sass 变量 $container-max-widths 修改 Bootstrap 容器宽度，而非直接覆盖 max-width；该变量需在 functions 和 variables 之后、container 之前重定义，key 必须严格为 xs/sm/md/lg/xl/xxl。
直接改 .container 的 max-width 会破坏响应逻辑
手动加 style="max-width: 1200px" 或在 CSS 里写 .container { max-width: 1200px; } 看似简单，但会导致所有屏幕尺寸（包括手机）都卡死在这个宽度，小屏内容横向溢出或被强制缩放。因为 Bootstrap 的响应式容器依赖媒体查询逐级生效，硬覆盖会跳过断点判断。
常见错误现象：
- 移动端页面左右滑动才能看到完整内容
-
.container-lg在 lg 断点下宽度没变，还是 1140px - 加了
!important后桌面端变宽，但手机端也变宽，失去响应性
用 $container-max-widths 变量重定义才是正解
Bootstrap 5.1+ 把所有容器宽度封装在 Sass map 变量 $container-max-widths 中，修改它才能真正同步影响所有断点和辅助类（如 .container-xl）。
实操要点：
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重定义该变量 - key 名必须严格为
xs、sm、md、lg、xl、xxl，少一个或拼错就会回退到默认值 - 如果只改某一级（比如把
xl从 1140px 改成 1200px），其他断点不受影响 - 若项目混用 Bootstrap 4 的旧变量（如
$grid-breakpoints），Sass 编译不报错但宽度静默失效
纯 CSS 覆盖仅适用于简单场景且需严格控制媒体查询范围
如果你没用 Sass 构建流程，只能靠 CSS 覆盖，那必须按 Bootstrap 原有断点精确写媒体查询，不能只写一条规则。
例如想让 xl 断点（≥1200px）下宽度变成 1400px，xxl（≥1400px）下变成 1600px，就得这样写：
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1600px;
}
}
注意：
- 不要用
!important—— 只要 CSS 文件加载在 Bootstrap 之后，选择器没降权（比如别写成div.container），就能正常覆盖 - 不能只覆盖一个断点就以为完事，比如只写
@media (min-width: 1400px)，那 1200–1399px 区间仍走默认 1140px - 这种写法不改变
$container-max-widths，所以.container-xl类的行为可能和你预期不一致
.container-fluid 不是“加大容器”，而是完全不同的行为模式
.container-fluid 的 width: 100% 是写死的，不参与任何断点计算，也不读取 $container-max-widths。它适合全屏 Banner、地图、后台表格等需要撑满视口的场景，但不适合常规正文流布局。
容易被忽略的点：
- 它没有内边距（
padding-left/padding-right），内容会贴边，通常要自己加px-3或类似类补足 - 和
.container混用时，高度/对齐可能因 padding 差异出问题 - 它和
.container-{breakpoint}类互斥——.container-fluid-lg这种写法无效
真正的复杂点不在怎么改，而在改完之后要不要同步调整 $grid-breakpoints。如果只动 $container-max-widths 而不调断点，可能出现 “xxl 容器比 xl 还窄” 这种反直觉结果——因为断点阈值没变，但容器宽度映射关系已偏移。
