直接改 .container { max-width: 1200px } 无效，因其会被 Bootstrap 媒体查询规则覆盖；正确做法是按版本断点（如 v5.3+ 的 xl≥1200px、xxl≥1400px）用对应 @media 精准覆盖，或在 Sass 中重定义 $container-max-widths 变量并确保键名完整、加载顺序正确。
直接改 .container { max-width: 1200px } 无效，它会被 bootstrap 原生媒体查询规则覆盖；必须按断点逐条复写 @media 规则，或重定义 sass 变量。
查清你用的 Bootstrap 版本和对应断点值
不同版本的断点阈值和 max-width 值不同，改错数值就白忙。Bootstrap 5.3+ 的默认值是：
-
sm（≥ 576px）→540px -
md（≥ 768px）→720px -
lg（≥ 992px）→960px -
xl（≥ 1200px）→1140px -
xxl（≥ 1400px）→1320px
注意：xs 没有媒体查询，是兜底值（100%），所有未被更高断点覆盖的场景都走它。别拿 DevTools 里看到的“当前生效值”反推断点范围——它只表示“哪条 @media 被命中”，不是区间。
用自定义 CSS 覆盖指定断点的 max-width
这是 CDN 或已编译 CSS 环境下最常用、最安全的方式。关键不是“全改”，而是精准匹配原断点条件：
- 确保你的 CSS 文件在 Bootstrap CSS 之后加载
- 复制原断点的
@media (min-width: 1200px)，不能写成1199px或1201px - 只改你需要的断点，比如只想扩大大屏宽度，就只动
xl和xxl - 别加
!important——只要选择器没降权（例如别写成div .container），就能覆盖
示例（把 xl 断点下的宽度从 1140px 改为 1280px）：
@media (min-width: 1200px) {
.container {
max-width: 1280px;
}
}
用 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 );
为什么内联 style 或全局 max-width 不起作用
常见错误现象包括：
-
style="max-width: 1400px"写在 HTML 里，完全没反应 -
.container { max-width: 1400px }在小屏下生效，大屏下仍卡在1140px - 加了
!important后，手机横屏也变成1400px，内容横向溢出
根本原因：Bootstrap 的 .container 宽度由一组带优先级的 @media 规则控制，不是单条样式。全局声明没有媒体查询上下文，无法参与断点竞争；而内联样式虽然优先级高，但它会覆盖所有断点逻辑，破坏响应式阶梯。
真正起作用的是浏览器计算时“哪条 @media 规则匹配且胜出”。DevTools 的 Computed 面板里看 max-width 值，点开右侧来源，就能确认是哪条规则在生效——这是定位问题最快的方式。
