容器最大宽度由 .container 类通过媒体查询自动控制，非js计算；默认按断点（xs至xxl）设定max-width，手动设style会破坏响应逻辑；修改需重定义sass变量$container-max-widths或用!important媒体查询覆盖。
容器最大宽度由 .container 类自动控制
Bootstrap 的 .container 不是固定像素宽，而是根据断点预设了不同屏幕尺寸下的最大宽度。它本质是一组带 max-width 的媒体查询规则，不是靠 JS 或自定义 CSS 动态计算的。
默认行为下，你只需要用 <div class="container">，框架就会在 <code>xs、sm、md、lg、xl、xxl 断点应用对应值。比如在 lg 屏幕（≥992px）上，max-width 是 992px；到 xxl（≥1400px）则变成 1320px。
常见误区是手动加 style="max-width: 1200px" 覆盖它——这会破坏响应逻辑，导致小屏下也卡死在 1200px，内容被横向挤压。
修改默认最大宽度需覆盖 Sass 变量
如果你用的是 Bootstrap 源码（Sass 版），最干净的方式是在引入 Bootstrap 前重定义 $container-max-widths 变量：
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px );
注意两点：
- 必须包含所有断点键名（
sm/md/…），缺一个会导致对应断点回退到 Bootstrap 默认值 - 值可以是
px、rem或%，但不建议用em或视口单位（vw），它们可能和栅格系统冲突 - 如果只改某一个断点（比如只要
xl到1200px），可以用map-merge：
$container-max-widths: map-merge($container-max-widths, (xl: 1200px));
纯 CSS 引入时只能用媒体查询硬覆盖
如果你用的是编译好的 bootstrap.min.css（没走 Sass），就无法修改变量，只能手写媒体查询覆盖：
@media (min-width: 1200px) {
.container {
max-width: 1140px !important;
}
}
@media (min-width: 1400px) {
.container {
max-width: 1280px !important;
}
}
这里的关键是：
- 必须用
!important，否则原 CSS 的 specificity 更高（Bootstrap 的规则带.container和媒体查询，权重已很高） - 断点数值要严格对齐 Bootstrap 版本的实际断点（v5.3 是
lg: 992px、xl: 1200px、xxl: 1400px），查错就从这里开始 - 别只写
.container，漏掉.container-fluid或.container-sm等变体——它们各自独立，不会继承
.container-fluid 和断点类（如 .container-lg）的行为差异
.container-fluid 本质是 width: 100%，没有 max-width，所以它永远铺满父容器，和响应式宽度无关。
而 .container-lg 这类“断点容器”意思是：在 lg 及以上才启用 max-width，更小屏幕下等同于 .container-fluid。它的实际效果是：
-
xs–md：无max-width，内容撑满 -
lg及以上：应用lg断点对应的max-width（默认992px）
所以它不是“只在 lg 生效”，而是“最小生效断点”。这点容易误解，调试时看浏览器 DevTools 里 computed 面板的 max-width 值变化最准。
