真正生效需重定义Sass变量$container-max-widths并在引入Bootstrap前覆盖，同时同步更新$grid-breakpoints；CDN用户只能用!important配合媒体查询覆盖，但会导致响应行为脱节。
直接改 $container-max-widths 才算真正生效
只在 CSS 里写 .container { max-width: 1200px !important; } 看似简单，但会破坏响应式阶梯逻辑——.container-lg 可能比 .container-xl 还宽，col-lg-6 在 992px 下不按预期布局。真正可控的方式是重定义 Sass 变量 $container-max-widths，它才是所有容器宽度的唯一源头。
必须在引入 Bootstrap 核心样式前覆盖该变量，顺序不能错：
@import "bootstrap/scss/functions";@import "bootstrap/scss/variables";- 在这里重定义
$container-max-widths -
@import "bootstrap/scss/container";（以及后续其他模块）
示例（把 xl 断点从默认 1140px 改为 1200px）：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1200px, xxl: 1320px );
$grid-breakpoints 必须同步更新，否则断点失效
改了 $container-max-widths 却不碰 $grid-breakpoints，会出现“类名存在但不起作用”的情况。比如你把 lg 宽度调大了，但 $grid-breakpoints 里 lg: 992px 没变，那 .container-lg 依然只在 ≥992px 时启用，而它的宽度却可能被其他断点值覆盖，导致视觉错乱。
立即学习“前端免费学习笔记（深入）”；
两个变量必须键名一致、数值协同：
- 都保留
xs、sm、md、lg、xl、xxl六个键 - 每个键的值单位统一用
px（如lg: 1024px），不能漏单位或写成字符串 - 如果新增断点（如
xxxl），需同时加进两个变量，且确保所有依赖函数（如make-container-max-widths()）能识别
CDN 用户只能用 !important 覆盖，但有硬伤
用 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css"> 的项目，无法修改 Sass 变量，只能走 CSS 覆盖路线。这时要加 !important，且必须写全断点媒体查询：
@media (min-width: 1200px) {
.container {
max-width: 1200px !important;
}
}
问题在于：所有工具类（.d-lg-block、.col-xl-4）和 JS 组件（Offcanvas 的 breakpoint 判断）仍按原始断点运行，你看到的“宽度变了”，但其他响应行为可能完全脱节。
更稳妥的替代方案：
- 换用
.container-fluid+ 工具类控制留白（如px-5或mx-auto配合max-width: 1200px） - 对关键区域单独加 wrapper 元素并设
max-width，不依赖.container类
--bs-gutter-x 和容器宽度无关，别混淆
有人看到 --bs-gutter-x 就以为调它能“放大容器”，其实它只影响 .row 内部列之间的水平间距（gutter），和 .container 的 max-width 完全无关。设置 :root { --bs-gutter-x: 2rem; } 后，.col-6 之间空隙变大，但容器左右边界没动，内容区总宽度也不变。
常见误操作：
- 在
.container上写style="--bs-gutter-x: 2rem"→ 无效，该属性只对.row生效 - 用
px-0清除容器内边距后，误以为 gutter 是唯一留白来源 → 实际上.container本身无 padding，左右留白来自margin: 0 auto居中后的空白
真想让内容区域“看起来更宽”，优先考虑 .container-fluid，再配合间距工具类微调，比硬啃变量更轻量、更可控。
