直接写 .container { max-width: 1200px } 不行，因无媒体查询会强制应用于所有屏幕，导致小屏内容溢出；Bootstrap 的容器宽度由断点媒体查询控制，自定义需对齐断点、确保加载顺序，并避免 !important。
直接写 .container { max-width: 1200px } 为什么不行
这条规则没带媒体查询，浏览器会把它应用到所有屏幕尺寸。手机竖屏（≈390px 宽）下也强制撑到 1200px，内容横向溢出，页面可左右拖动。而 bootstrap 的 .container 实际由一组 @media (min-width: ...) 规则控制，比如：@media (min-width: 1200px) { .container { max-width: 1140px; } }
你的无断点规则优先级低于这些，大屏被覆盖、小屏失控。
CDN 项目：用媒体查询精准覆盖指定断点
适用于引入 bootstrap.min.css 的项目，关键在“断点对齐”和“加载顺序”：
- 自定义 CSS 文件必须放在 Bootstrap CSS 之后加载
- 断点值必须严格匹配你用的 Bootstrap 版本（v5.3+ 是
xl: 1200px、xxl: 1400px） - 只改你需要的断点，例如把
xl断点从 1140px 扩到 1280px：@media (min-width: 1200px) {<br> .container { max-width: 1280px; }<br>} - 如果还要适配
xxl（≥1400px），同步加一条：@media (min-width: 1400px) {<br> .container { max-width: 1440px; }<br>} - 不要用
!important——只要选择器简洁（别写成div.container）、加载顺序对，就能干净覆盖
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但只适用于你自己编译 Bootstrap（如 Webpack + sass-loader）：
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前重赋值 - 键名
sm、md、lg、xl、xxl一个都不能拼错，缺一个就会回退默认值 - 推荐用
map-merge只改局部，避免漏掉其他断点：$container-max-widths: map-merge($container-max-widths, (<br> xl: 1280px,<br> xxl: 1440px<br>));
- 如果新增了断点（比如自定义
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效
为什么改了断点却没看到容器变宽
常见静默失败原因：
- 父元素有
padding或overflow: hidden，视觉上“压窄”了容器，实际max-width没问题——查 DevTools 的 Computed 面板确认哪条规则胜出 - 用了旧版 Bootstrap（如 v4.x），其
xl是 ≥1200px 但默认值是 1140px，而 v5.3+ 的xxl才是 ≥1400px；表面类名一样，数值可能差几十像素 - 只调了
$grid-breakpoints却没同步更新$container-max-widths，导致断点存在但容器宽度没跟上 - 误以为
.container-lg会在xl断点自动升级——它不会，“断点容器”只在对应断点及以上启用固定宽度，更低断点退化为 100%，更高断点仍沿用原值
