不能直接写 .container { max-width: 1200px }，因其会破坏小屏响应式导致 iPhone 横向滑动；Bootstrap 5 的 .container 宽度由 @media (min-width: ...) 多断点规则控制，覆盖时须复现对应断点（如 v5.3+ 为 xl: 1200px、xxl: 1400px），且自定义 CSS 必须后载于 bootstrap.min.css；更安全的方式是通过 Sass 重定义 $container-max-widths 变量（需完整包含 xs–xxl 键并用 map-merge 局部更新），否则漏键将静默回退默认值。
不能直接写 .container { max-width: 1200px } —— 这会破坏所有小屏响应式，导致 iPhone 上左右滑动。
必须匹配原生媒体查询条件
Bootstrap 5 的 .container 宽度由一组 @media (min-width: ...) 规则控制，不是单条 CSS。你覆盖时得复现它的断点值，否则：大屏被原规则覆盖、小屏被你的无断点规则撑爆。
- 查清你用的 Bootstrap 版本对应的断点：v5.3+ 是
xl: 1200px、xxl: 1400px（不是 1440 或 1399） - 只改你需要的断点，比如只想扩大大屏宽度：
@media (min-width: 1200px) { .container { max-width: 1280px; } } @media (min-width: 1400px) { .container { max-width: 1440px; } } - 自定义 CSS 文件必须在 Bootstrap 的
bootstrap.min.css之后加载，不加!important也能生效 - 别写
div.container这类降权选择器——它会降低优先级，覆盖失败
为什么重定义 $container-max-widths 变量更安全
如果你用 Sass 编译（如 Webpack + sass-loader），改变量才是源头控制，不会和媒体查询打架。
- 必须严格按顺序导入：
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→ 你的重定义 →@import "bootstrap/scss/container" -
$container-max-widths必须包含全部键：xs、sm、md、lg、xl、xxl，漏一个就回退默认值 - 推荐用
map-merge只改局部，避免手误漏项：$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
- 如果同时改了
$grid-breakpoints（比如新增xxxl），$container-max-widths里也必须补上对应键，否则.container-xxxl不会被编译
什么时候该放弃 .container 直接换方案
很多“想加大容器”的真实需求，其实是“这块区域要撑满视口但保留内边距”，硬改 .container 反而绕远。
立即学习“前端免费学习笔记（深入）”；
-
.container-fluid是真全宽（width: 100%，无max-width），适合 banner、后台主区等场景 - 组合工具类快速控留白：
class="container-fluid px-5"比调宽.container更直观；px-0彻底去边距，mx-auto配合max-width: 1200px做居中限宽容器 - 不要混用
.container和.container-fluid在同一嵌套链里——它们的宽度策略冲突，容易出现意外缩进或溢出
最容易被忽略的是断点数值的版本差异：v5.2 和 v5.3 的 xxl 起始值不同，查错一条媒体查询条件，整段覆盖就失效；Sass 项目里漏掉一个键名，那个断点下的容器就静默回退到默认值，连警告都不会报。
