直接写 .container { max-width: 1600px } 会破坏响应式逻辑，导致小屏横向滚动、平板布局错位；必须通过精准媒体查询（如 @media (min-width: 1400px)）覆盖或重定义 Sass 变量 $container-max-widths，并严格匹配断点阈值与加载顺序。
直接写 .container { max-width: 1600px } 会破坏所有小屏体验，必须按断点精准覆盖或重定义变量——否则手机页面横向滚动、平板布局错位都是常态。
为什么纯 CSS 覆盖必须严格匹配媒体查询条件
Bootstrap 5 的 .container 宽度由多条 @media 规则控制，不是单个属性。你写的无条件规则会被更具体的断点规则压制，且在小屏下意外生效。
- 查清你用的 Bootstrap 版本断点值：
xl是≥1200px（默认max-width: 1140px），xxl是≥1400px（默认1320px） - 自定义 CSS 文件必须在
bootstrap.min.css之后加载，否则规则不参与层叠 - 媒体查询条件必须一字不差，比如
@media (min-width: 1400px)写成1399px或1401px都不会命中 - 别加
!important——它会让所有断点都套用同一宽度，响应式彻底失效
正确示例（适配 2K 屏）：
@media (min-width: 1400px) {
.container {
max-width: 1440px;
}
}
@media (min-width: 1920px) {
.container {
max-width: 1600px;
}
}
用 container-fluid 替代时要注意的栅格陷阱
container-fluid 是真全宽，但它和标准 .container 的栅格行为不兼容——尤其当你混用 .row 和 .col 时，内边距和负外边距必须对齐。
立即学习“前端免费学习笔记（深入）”；
-
container-fluid默认左右各带15pxpadding（即--bs-gutter-x / 2） - 若要真正贴边，必须加
px-0；但此时内部.row必须存在，否则.col的margin-left: -15px无法抵消，列会左偏 - 不要在
container-fluid外再套.container，两者宽度策略冲突，mx-auto可能失效 - 如果设计稿要求“内容区固定 1400px + 两侧留白自适应”，用
container-fluid px-5比硬调.container更可控
Sass 项目中重定义 $container-max-widths 的静默失效点
这个方式最干净，但编译不报错 ≠ 生效。很多项目改完发现 computed style 还是旧值，问题往往出在顺序或键名上。
- 必须在
@import "bootstrap/scss/functions"和@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名必须完整且大小写严格：
xs、sm、md、lg、xl、xxl缺一个，对应断点就回退到默认值 - 新增断点（如
xxxl: 1920px）时，$grid-breakpoints和$container-max-widths必须同步更新，否则编译可能静默跳过 - 推荐用
map-merge只改局部，避免漏掉其他断点：
$container-max-widths: map-merge($container-max-widths, ( xl: 1280px, xxl: 1440px ));
最容易被忽略的是验证环节：打开不同宽度的浏览器窗口，用 DevTools 查看 .container 的 computed max-width 值，而不是只检查 CSS 文件是否加载成功——因为 Sass 编译错误或顺序错位，常常表现为“规则存在但未生效”。
