应按断点用媒体查询覆盖或重定义Sass变量$container-max-widths，Bootstrap 5.3+断点为xs(100%)、sm(540px)、md(720px)、lg(960px)、xl(1140px)、xxl(1320px)，需严格匹配版本并确保变量完整、顺序正确。
直接写 .container { max-width: 1200px } 会破坏响应式逻辑，小屏下强制撑宽导致横向滚动；必须按断点用媒体查询精准覆盖，或重定义 Sass 变量 $container-max-widths。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和默认宽度不同，改错数值就白忙。Bootstrap 5.3+ 的默认值是：
-
sm（≥ 576px）→ 540px -
md（≥ 768px）→ 720px -
lg（≥ 992px）→ 960px -
xl（≥ 1200px）→ 1140px -
xxl（≥ 1400px）→ 1320px
xs 没有媒体查询，是兜底值（100%），所有未被更高断点覆盖的场景都走它。别拿 DevTools 里看到的“当前生效值”反推断点范围——它只表示“哪条 @media 被命中”，不是区间。
CDN 项目：用媒体查询精准覆盖指定断点
适用于引入 bootstrap.min.css 的项目，关键在断点对齐和加载顺序：
- 自定义 CSS 文件必须放在 Bootstrap CSS 之后加载
- 断点值必须严格匹配你用的 Bootstrap 版本（v5.3+ 是
xl: 1200px、xxl: 1400px） - 只改你需要的断点，例如把
xl断点下的宽度从 1140px 改为 1280px：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
- 不要写
div .container这类降权选择器，保持.container简洁即可 - 不加
!important——只要顺序对、断点准，就能干净覆盖
Sass 项目：重定义 $container-max-widths 变量
这是官方推荐方式，但极易静默失败，必须满足三个硬性条件：
- 变量重定义语句必须放在
@import "bootstrap/scss/variables"之后、@import "bootstrap/scss/container"之前 -
$container-max-widths必须包含全部 key：xs、sm、md、lg、xl、xxl，缺一个，对应断点就会回退到默认值 - 如果新增了自定义断点（如
xxxl），必须同步更新$grid-breakpoints和$container-max-widths，否则不生效
示例（Sass 项目中只调大 xl 和 xxl）：
$container-max-widths: ( xs: 100%, sm: 540px, md: 720px, lg: 960px, xl: 1280px, xxl: 1440px );
局部突破需求：用 .container-fluid 套内层限宽容器
当只要 Banner、全宽图表等某一块区域突破默认宽度，其他地方保持原样时：
-
.container-fluid本身是width: 100%，无任何max-width - 外层用
.container-fluid撑满，内层嵌套.container或自定义宽度的div控制内容区 - 这种方式零副作用，兼容所有 Bootstrap 5 版本，且语义清晰
比如：<div class="container-fluid"><div class="container">...</div></div>，外层全宽，内层仍走断点逻辑。
最容易被忽略的是：改了 $container-max-widths 却没同步更新 $grid-breakpoints，或者只覆盖了一个断点却忘了更高断点（比如只改了 xl，但实际用户大量使用 xxl 屏幕），结果在 1400px+ 区间仍卡在默认值上。
