bootstrap 5 的 .container 类按断点阶梯式设置 max-width，非固定宽度；默认含 xs、sm、md、lg、xl、xxl 六级断点，具体值取决于版本及 sass 变量配置。
Bootstrap 5 的 .container 类不是“固定死”的宽度，而是按断点阶梯式设置 max-width，且断点和对应宽度与你用的 Bootstrap 版本、是否自定义了 Sass 变量强相关。
默认断点与 max-width 值（Bootstrap 5.3+ 官方默认）
Bootstrap 5 使用 xs、sm、md、lg、xl、xxl 六级断点，.container 的 max-width 在每个断点起效：
-
xs（100% -
sm（≥ 576px）：540px -
md（≥ 768px）：720px -
lg（≥ 992px）：960px -
xl（≥ 1200px）：1140px -
xxl（≥ 1400px）：1320px
注意：这些值定义在 Sass 变量 $container-max-widths 中，编译 CSS 后才生效。如果你用的是 CDN 引入的预编译 CSS，就直接按这个表走；如果自己用 Sass 编译，改了变量就会变。
.container-fluid 和 .container-{breakpoint} 的行为差异
这两个容器不共享同一套逻辑：
-
.container-fluid始终是width: 100%，无max-width限制，也不响应断点 -
.container-sm这类“断点容器”只在 该断点及以上 生效max-width，更低断点仍为100%。例如：.container-md在xs和sm下是 100%，从md（≥768px）开始才设为720px - 它不会“回退”——
.container-lg在xl断点下仍是960px，不会自动升级到1140px
为什么有时候容器没按预期变宽？
常见原因不是写错了类名，而是以下几点被忽略：
- 父元素有
padding或overflow: hidden，视觉上“压窄”了容器，实际max-width没问题 - 你自己或第三方 CSS 覆盖了
.container的max-width，尤其注意检查 DevTools 的 Computed 面板里哪个规则胜出 - 用了旧版 Bootstrap（比如 4.x），其断点分界和宽度值不同：
md是 ≥768px 但对应720px，而lg是 ≥992px 对应960px—— 表面类名一样，数值可能差几十像素 - 自定义了
$grid-breakpoints但没同步更新$container-max-widths，导致断点存在但容器宽度没跟上
想精确控制某断点下的宽度，别硬写内联样式
直接覆盖 max-width 容易失控，推荐两种更稳的方式：
- 用 Bootstrap 自带的
.container-xxl（如果够用），它是目前最宽的默认容器 - 在 Sass 项目中重定义变量：
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1440px // 把这里改成你需要的值 );
然后重新编译 CSS - 如必须用 CSS 覆盖，加
!important不是好办法；优先用更高特异性选择器，例如：body .container { max-width: 1440px; }
真正容易被忽略的，是 .container 的响应逻辑本质是「在断点处设置 max-width」，而不是「根据视口宽度线性缩放」—— 它不会在 1100px 时显示 1050px 宽度，只会卡在 lg 的 960px 或 xl 的 1140px 之间跳变。
