直接改 .container 的 width 不生效，因 Bootstrap 4+ 已弃用 width，全靠 max-width 控制各断点宽度（如 1140px），且默认 width: 100%；强行设置 width 会被媒体查询中的 max-width 覆盖。
为什么直接改 .container 的 width 不生效？
bootstrap 4+（包括 bootstrap 5）早已弃用 width，全部改用 max-width 控制容器宽度。你看到的“1170px”“1140px”等值，实际是各断点下的 max-width，不是固定 width。强行覆盖 width 不起作用，因为会被后续更具体的 @media 规则或 max-width 覆盖。
-
.container默认是width: 100%，靠max-width限制上限 - 所有断点规则都写在
max-width上，比如@media (min-width: 1200px) { .container { max-width: 1140px; } } - 如果你只写
.container { width: 1400px }，它会在小屏下撑爆视口，且被媒体查询覆盖
怎么安全地扩展大屏下的 .container 宽度？
最稳妥的方式是在自定义 CSS 中，用更高优先级重写对应断点的 max-width，不破坏原有响应逻辑：
- 在你的项目 CSS 文件末尾（确保加载顺序在 Bootstrap 之后）添加：
@media (min-width: 1200px) { .container { max-width: 1400px; } } @media (min-width: 1400px) { .container { max-width: 1600px; } } - Bootstrap 5 已原生支持 ≥1400px 断点，所以第二条可直接沿用其语义
- 别用
!important—— 只要 CSS 加载顺序正确、选择器没降权（比如别写成div.container），就能覆盖
想全局替换所有断点宽度？小心破坏栅格对齐
如果你需要整套新尺寸（如 576px → 600px，992px → 1024px…），不要手动逐条覆盖，而应：
- 使用 Sass 版本：修改
$container-max-widths变量后重新编译（推荐，最干净） - 若只能用 CDN 或已编译 CSS，则必须同步调整所有依赖容器宽度的组件，例如：
-
.navbar的居中逻辑可能偏移 -
.card-deck或.row内部的负 margin 行为仍基于原始 container padding，但视觉上不会崩，除非你同时动了padding
-
- 切记：Bootstrap 栅格列（
.col-*）本身不依赖 container 宽度，只依赖12等分和flex，所以改 container 宽度一般不影响列布局，但会影响内容呼吸感和留白比例
用 .container-fluid + 内部限宽更灵活？
当设计稿明确要求「内容区 1400px，两侧留白自适应」时，比硬改 .container 更可控：
- 结构写成：
<div class="container-fluid"><div class="container-lg" style="max-width: 1400px;">...</div></div> - 或直接：
<div class="container" style="max-width: 1400px;">...</div>（仅用于单页临时调整） - 这种写法绕过所有媒体查询，适用于全屏背景+居中内容的现代布局，也避免影响其他页面复用的
.container行为
真正容易被忽略的是：Bootstrap 的 container 类本质是“最大内容宽度锚点”，不是“画布边界”。改它之前，先确认你改的是内容承载需求，还是视觉留白需求——后者往往用 container-fluid 包一层再内嵌限宽更稳。
