真正自定义容器宽度需修改sass变量$container-max-widths并同步更新$grid-breakpoints，仅css覆盖会导致断点逻辑错乱；--bs-gutter-x仅控制.row内列间距，不影响.container宽度。
直接改 $container-max-widths 才算真正自定义容器宽度
Bootstrap 5 的 .container 宽度不是写死的 CSS 值，而是由 Sass 变量 $container-max-widths 控制的。如果你只在 CSS 里覆盖 .container 的 max-width，那只是表面修改——断点逻辑、.container-lg 等类的行为仍按原始变量计算，容易出现“lg 断点下宽度没变”或“xxl 容器比 lg 还窄”这类错乱。
正确做法是在自定义 Sass 文件中重定义该变量，例如：
$container-max-widths: ( xs: 100%, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px );
注意必须同步更新 $grid-breakpoints（否则断点存在但容器不响应），且编译后才生效。用 CDN 引入 CSS 的项目无法走这条路，只能退而求其次用 !important 覆盖——但会破坏响应式阶梯逻辑。
--bs-gutter-x 是栅格间距，和容器宽度无关
这个 CSS 自定义属性控制的是 .row 内部列之间的水平间距（即 gutter），它影响的是 .col 之间的空隙，完全不改变 .container 的 max-width 或内边距。常见误解是“调大 --bs-gutter-x 就能让内容更宽松”，其实它只缩进列，容器本身宽度不变。
- 默认值是
1.5rem（24px），可通过:root { --bs-gutter-x: 2rem; }全局调整 - 仅对
.row生效；.container上设置无效 - 若同时用
px-0清除容器左右内边距，gutter 会变成唯一横向留白来源
想让容器“看起来更宽”？优先用 .container-fluid + 间距微调
多数场景下，所谓“自定义宽度”其实是希望内容区域撑得更开，而不是精确控制每个断点的像素值。这时 .container-fluid 是更稳妥的选择：它无 max-width 限制，宽度恒为 100%，且自带 padding-left/right: 15px（即 --bs-gutter-x 的一半）。
如需进一步收放留白，直接组合间距工具类即可：
-
class="container-fluid px-0"→ 彻底去掉左右内边距 -
class="container-fluid px-5"→ 改用更大的水平 padding（对应 3rem） - 避免混用
px-0和mx-auto，后者在全宽容器里无意义
修改后务必验证断点行为是否一致
自定义 $container-max-widths 后，最容易被忽略的是断点“阶梯断裂”：比如你把 xl 设为 1200px，但 $grid-breakpoints 里 xl 还是默认的 1200px，那没问题；可如果把 xl 改成 1300px 却忘了同步改断点，就会导致 @media (min-width: 1300px) 根本不触发，.container-xl 永远不会生效。
验证方法很简单：打开浏览器开发者工具，切换设备尺寸，检查 .container 元素的 computed max-width 是否随断点准确变化；特别留意 xxl 断点（≥1400px）在高分屏或缩放非 100% 时是否被正确捕获。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
