Bootstrap 5 容器（Container）的最大宽度能否修改？

可修改容器宽度，方式有三：覆盖$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 编译会静默失败，页面容器宽度回退到默认值——这种问题不会报错，只能靠比对渲染结果排查。