Bootstrap 5+ 的容器响应式依赖媒体查询控制 max-width，直接设 .container { max-width: 1200px } 会破坏小屏显示，因其无断点逻辑，覆盖默认断点规则导致手机端横向溢出；正确做法是按版本断点用媒体查询覆盖或重定义 $container-max-widths 变量。
直接设 width 不生效，bootstrap 5+ 全靠 max-width 控制各断点下的容器宽度；改错地方会导致小屏横向溢出、大屏卡死在默认值，必须按断点逻辑来。
为什么 .container { max-width: 1200px } 会破坏响应式？
这条规则没带媒体查询，浏览器会把它应用到所有屏幕尺寸——手机竖屏（≈390px）下也强制 1200px，内容被横向挤压，页面可左右拖动。而 Bootstrap 的 .container 实际是一组 @media (min-width: ...) 规则，比如：
@media (min-width: 1200px) {
.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.container { max-width: 1320px; }
}
你写的无断点规则优先级低于这些，小屏下又因没约束而失控。
- 常见错误现象：
iPhone上能左右滑动、Chrome模拟器看着正常但真机错位、平板横屏突然变窄 - 别用
style="max-width: 1200px"或!important覆盖——这是最易踩的坑 -
.container-fluid是真全宽（width: 100%，无max-width），不是“加大一点”的替代方案
CDN 项目：用媒体查询覆盖对应断点
适用于引入 bootstrap.min.css 的项目，关键在“复现断点条件”和“加载顺序”：
- 自定义 CSS 必须放在 Bootstrap CSS 之后 加载
- 断点数值必须严格对齐你用的 Bootstrap 版本（如 v5.3 是
xl: 1200px、xxl: 1400px） - 只改你需要的断点，例如把大屏宽度从 1140px 扩到 1280px：
@media (min-width: 1200px) {
.container { max-width: 1280px; }
}
@media (min-width: 1400px) {
.container { max-width: 1440px; }
}
不加 !important ——只要顺序对、断点准，就能干净覆盖。
Sass 项目：重定义 $container-max-widths 变量
这是最彻底的方式，但顺序和键名容错率极低：
- 必须在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前赋值 - 变量必须包含全部断点键名：
xs、sm、md、lg、xl、xxl，缺一个就会回退到默认值 - 只调大
xl和xxl的示例：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1280px, xxl: 1440px );
注意：Bootstrap 5.0.x 等旧版本可能不支持该变量名，编译无报错但实际无效——得靠 DevTools 查最终计算出的 max-width 值确认。
局部突破需求：用 .container-fluid + 工具类
很多所谓“加宽容器”，真实场景其实是 Banner、后台主区等需要视觉上更宽松，而非全局改断点：
-
.container-fluid本身是width: 100%，天然适配 2K 屏 - 默认有
padding-left/right: 15px，用px-0清除，或px-5放大留白 - 组合写法：
<div class="container-fluid px-5"></div> - 别混用
mx-auto——在 100% 宽容器里它不起作用，还可能干扰 RTL
真正容易被忽略的是：Sass 变量覆盖失败时页面看起来“正常”，但 DevTools 里 max-width 值根本没变；还有人把 .container-sm 当成“小屏专用”，结果大屏被卡死在 540px ——它其实是“≥576px 才启用限制”。
