bootstrap 5 的 .container 默认响应式，直接设 style="max-width:1200px" 会破坏断点逻辑导致小屏溢出；应使用 .container-md/.container-lg 或 sass 重定义 $container-max-widths 变量。
Bootstrap 5 的 .container 本身已是响应式最大宽度容器，无需额外实现——它默认就按断点阶梯设置 max-width；所谓“限制”，其实是设计意图，不是缺陷。
为什么直接加 style="max-width: 1200px" 会出问题
手动覆盖 max-width 破坏的是断点响应链：小屏（如手机）本该退化为 100% 宽度，结果被卡死在 1200px，内容横向溢出或强制滚动。这不是 Bootstrap “没做好”，而是你绕过了它的媒体查询逻辑。
- 用
!important强行覆盖，移动端也继承该值，.container彻底失去响应能力 -
mx-auto + width组合无法匹配断点切换，且在 flex 或 grid 上下文中易导致居中失效 - 所有自定义样式必须和 Bootstrap 的
@media规则同级才可能协同，否则优先级或作用域错位
.container-sm 到 .container-xxl 的真实行为
这些类不是“更小/更大容器”，而是“从哪个断点开始启用固定宽度”：比如 .container-md 在 时是 <code>100%，≥768px 才应用 720px；而 .container-fluid 始终 100%，无任何 max-width。
-
.container= 全断点生效（xs→xxl 全部有对应max-width） -
.container-lg= 仅在 ≥992px 启用960px，更小屏幕退化为100% - 不要混用多个
.container-*类，后者会覆盖前者，但断点逻辑不叠加
修改默认最大宽度的两种可行路径
如果你真需要改数值（比如把 xl 从 1140px 改成 1200px），只有两条路走得稳：
- 用 Sass：在引入 Bootstrap 前重定义
$container-max-widths变量，并确保$grid-breakpoints同步——否则断点存在但容器不响应 - 用 CDN 项目：只能靠媒体查询覆盖，例如：
@media (min-width: 1200px) { .container { max-width: 1200px !important; } }但必须为每个断点单独写，且!important不可避免 - 别碰
--bs-gutter-x：它只影响.row内列间距，和容器宽度无关
文章详情页这类场景该选哪个容器
窄屏需撑满、宽屏需限宽——这正是 .container-md 或 .container-lg 的典型用途。比 .container 更合适，因为大屏（如 4K）下 .container 会到 1320px，单行文字过长，阅读疲劳。
- 正文区域优先用
.container-lg：≥992px 时960px，兼顾平板与桌面 - 配图/代码块必须加
img-fluid和pre-scrollable，否则宽屏拉伸、窄屏溢出 - 若需精细控制（比如只在 ≥1200px 才限宽），宁可用自定义类 + 媒体查询，别硬调
.container
最常被忽略的一点：容器宽度改动后，必须在真机或模拟多断点环境下验证是否“阶梯断裂”——比如改了 xxl 的值却忘了同步断点阈值，会导致那个断点完全不触发。
