Bootstrap 5 中直接设置 .container { width: 1200px } 不生效，因宽度逻辑已由 max-width 和媒体查询接管；应复写对应断点的 max-width，如 @media (min-width: 1200px) { .container { max-width: 1280px; } }，并确保 Sass 项目同步更新 $container-max-widths 与 $grid-breakpoints。
直接写 .container { width: 1200px } 不生效
Bootstrap 5 彻底弃用了 width 控制容器尺寸，所有宽度逻辑都移交给了 max-width + 媒体查询。你写的这条规则会被后续更具体的 @media (min-width: 1200px) 规则覆盖，小屏下还可能因没约束而撑满视口，大屏下仍卡在默认的 1140px。浏览器开发者工具里能看到它被划掉——不是没加载，是优先级不够。
.container { max-width: 1200px } 导致手机横向溢出
这条规则没带媒体查询，浏览器会把它应用到所有屏幕尺寸。iPhone 竖屏（≈390px）下也强制 1200px，内容被横向挤压，页面出现左右滚动条。真正起作用的是 Bootstrap 内置的一组断点规则，例如：
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.container { max-width: 1320px; }
}
想改宽，必须复现对应断点条件，不能只写一条全局 max-width。
CDN 项目改宽度，只加 !important 是最常见坑
- 加了
!important后，小屏也被锁死在大屏宽度，响应式阶梯断裂 - 所有工具类（如
.col-xl-4）和 JS 组件（如 Offcanvas 的 breakpoint 判断）仍按原始断点运行，视觉和行为脱节 - 正确做法是：确保自定义 CSS 在
bootstrap.min.css之后加载，然后精准复写断点媒体查询，不加!important - 例如把 xl 断点宽度从
1140px改为1280px，只写：@media (min-width: 1200px) { .container { max-width: 1280px; } }
Sass 项目漏写 $grid-breakpoints 同步更新
重定义 $container-max-widths 变量时，如果只改了宽度却没同步更新 $grid-breakpoints，会出现“类名存在但不起作用”的静默失效。比如你设了 xxl: 1440px，但 $grid-breakpoints 里没有 xxl: 1400px，那 .container-xxl 就不会在 ≥1400px 时触发。两个变量的键名、单位、顺序必须完全一致，缺一不可。
立即学习“前端免费学习笔记（深入）”；
