正确自定义Bootstrap 5容器宽度须修改Sass变量$container-max-widths并同步更新$grid-breakpoints，仅CSS覆盖会导致响应式断点错乱；CSS变量--bs-container-*在原生Bootstrap中不存在，属伪方案。
直接改 $container-max-widths 才算真正自定义容器宽度
Bootstrap 5 的 .container 宽度不是写死的 CSS 值，而是由 Sass map 变量 $container-max-widths 驱动的。只在 CSS 里覆盖 .container 的 max-width，会导致断点行为错乱——比如 .container-lg 在 lg 断点下没生效，或 .container-xxl 比 .container-xl 还窄。
正确做法是在你自己的 Sass 入口文件（如 app.scss）中，按顺序导入：
- 先
@import "bootstrap/scss/functions"; - 再导入你的自定义变量文件（含重定义的
$container-max-widths） - 然后
@import "bootstrap/scss/variables"; - 最后
@import "bootstrap/scss/container";
示例重定义（仅改 xl 和 xxl，其余沿用默认）：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1200px, // ← 覆盖原 1140px xxl: 1440px // ← 覆盖原 1320px );
$grid-breakpoints 必须同步更新，否则断点逻辑失效
修改 $container-max-widths 时，$grid-breakpoints 必须保持键名一致、顺序一致、数值合理。否则会出现「断点存在但容器不响应」的情况，比如你加了 xxxl: 1600px 却没在 $grid-breakpoints 里声明，那 .container-xxxl 类根本不会被编译出来。
立即学习“前端免费学习笔记（深入）”；
常见错误场景：
- 只改
$container-max-widths里的xl值，但$grid-breakpoints中xl仍是1200px→ 实际触发点与容器宽度不匹配 - 删掉
$grid-breakpoints中的sm键 → 所有.col-sm-*类消失，且.container-sm失效 - 把
$grid-breakpoints的md设为800px，但$container-max-widths的md还是720px→ 容器在 800px 才开始响应，却沿用旧宽度
推荐做法：复制官方 _variables.scss 中的 $grid-breakpoints，和你的 $container-max-widths 放在同一个自定义文件里，确保一一对应。
用 CSS 变量 --bs-container-* 是伪方案，仅限 CDN 场景应急
某些文档提到设置 :root { --bs-container-xl: 1200px; }，但 Bootstrap 5.3+ 官方源码中**并不存在这类 CSS 变量**。这个写法实际来自第三方封装或早期非官方补丁，原生 Bootstrap 不读取 --bs-container-*，它只认 Sass 变量。
如果你用的是 CDN 引入 bootstrap.min.css，确实无法走 Sass 覆盖流程，此时只能：
- 用
!important直接覆盖.container的max-width（破坏响应式阶梯） - 改用
.container-fluid+ 工具类微调留白（如px-5） - 写媒体查询手动重置：
@media (min-width: 1200px) { .container { max-width: 1200px !important; } }
注意：这类 CSS 覆盖对 .container-lg 等断点类无效，因为它们的样式优先级更高，需单独写选择器。
--bs-gutter-x 和容器宽度完全无关，别混淆
看到有人调大 --bs-gutter-x 以为能让内容区域“变宽”，这是典型误解。--bs-gutter-x 控制的是 .row 内部列之间的水平间距（gutter），不影响 .container 的 max-width 或内边距。
关键事实：
-
--bs-gutter-x默认值是1.5rem（24px），只作用于.row，在.container上设置无效 - 若同时用
px-0清除容器左右 padding，gutter 就成了唯一横向留白来源——但这只是视觉“宽松”，容器本身宽度没变 - 想撑开主内容区，优先选
.container-fluid，再配px-0或px-4控制留白，比硬调 gutter 更可控
真正要改宽度，就回到 Sass 层；想调列间距，才动 --bs-gutter-x。两者职责清晰，混用只会让布局不可预测。
