可修改容器宽度，方式有三：覆盖$container-max-widths变量、使用.container-{breakpoint}类、改用.container-fluid；需注意版本兼容性与Sass导入顺序。
可以改，而且有不止一种方式——关键看你改的是哪一层：是覆盖默认断点值、新增断点，还是彻底绕过容器逻辑直接用 .container-fluid 或自定义类。
直接覆盖 $container-max-widths Sass 变量
Bootstrap 5 自带这个 map 类型变量，所有 .container 的响应式最大宽度都从它取值。你不需要重写 CSS，只需在引入 Bootstrap 前（或在自定义 Sass 文件中）重新赋值：
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前覆盖 - 新值要保持 key 名一致（
xs、sm…xxl），否则断点会失效 - 如果只改某一个断点，比如把
xl从1140px改成1200px，其他断点不受影响
示例：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1200px, // ← 只改这一行 xxl: 1320px );
用 .container-{breakpoint} 类做局部控制
这不是“修改最大宽度”，而是跳过全局配置，按需指定容器行为。比如 .container-lg 表示“在 lg 及以上断点才启用固定宽度，lg 以下宽度为 100%”。
-
.container-sm：≥576px 才设max-width，更小屏幕下等同于.container-fluid - 它不改变
$container-max-widths的值，只是切换生效断点 - 适合某些区域需要窄屏全宽、宽屏固定宽度的混合布局
为什么不要用 CSS 覆盖 max-width？
直接写 .container { max-width: 1200px !important; } 看似简单，但会破坏响应式链条：
- 所有断点都变成同一个宽度，
sm、md下也强制 1200px，小屏溢出 - 无法和
.container-sm等响应式类共存，它们依赖原生断点逻辑 - 后续升级 Bootstrap 时，这类硬覆盖容易被忽略，导致样式错乱
什么时候该放弃 .container？
如果你的需求本质不是“调整容器宽度”，而是“某些区块必须撑满视口”，那 .container-fluid 就是正解——它不走 $container-max-widths，也不受断点限制，width: 100% 是写死的。
- 全屏 Banner、登录页背景、数据看板顶部导航栏常用它
- 注意：它仍有左右
padding（默认 1.5rem），如需真正贴边，得加px-0 - 别为了“让某个组件变宽”而给整个页面换
.container-fluid，容易引发内边距、网格对齐等问题
真正容易被忽略的点是：改 $container-max-widths 后，必须确保你用的 Bootstrap 版本 ≥5.1.0（早期 5.0.x 里这个变量名是 $container-max-widths，但部分构建流程可能未正确注入 map 函数）；另外，如果你项目里混用了 Bootstrap 4 的旧变量名（比如 $grid-breakpoints），Sass 编译会静默失败，页面容器宽度回退到默认值——这种问题不会报错，只能靠比对渲染结果排查。
