Bootstrap 5 的 .container 在各断点下的 max-width 默认值为：xs（100%）、sm（540）、md（720）、lg（960）、xl（1140）、xxl（1320）；这些值由 Sass 变量 $container-max-widths 定义，按 min-width 媒体查询阶梯生效。
Bootstrap 5 的 .container 在各断点下的 max-width 值是多少
直接看官方默认值，别靠猜或查过时文档：.container 的 max-width 是按断点阶梯式设定的，且只在对应断点及以上生效（min-width 触发），不是“区间范围”。例如 md 断点的 720px 表示：当视口宽度 ≥ 768px 时，.container 最宽为 720px；这个值会一直沿用，直到被更大的断点覆盖。
默认六级断点与对应 max-width（单位 px）：
-
xs（ -
sm（≥ 576px）：540px -
md（≥ 768px）：720px -
lg（≥ 992px）：960px -
xl（≥ 1200px）：1140px -
xxl（≥ 1400px）：1320px
注意：xs 没有媒体查询，所以它不是“从 0 到 575px 的区间”，而是“所有未被更高断点覆盖的场景”——也就是兜底值。如果你删了 sm 及以上类，.container 就永远是 100% 宽。
为什么改了 $breakpoint-sm 却没看到 .container 宽度变化
因为 .container 的断点宽度不是自动跟随 $breakpoint-sm 的——它依赖独立变量 $container-sm、$container-md 等。Sass 源码里它们是分开定义的：
$container-sm: 540px$container-md: 720px$container-lg: 960px$container-xl: 1140px$container-xxl: 1320px
只调 $breakpoint-sm: 600px，但不改 $container-sm，那 sm 断点的触发时机变了（600px 起效），可容器还是 540px 宽——视觉上就是“断点提前了，但容器没跟上”。必须同步更新两组变量，否则响应逻辑就错位。
.container-fluid 和自定义 max-width 的关键区别
.container-fluid 不是“去掉 max-width”，而是显式设为 width: 100%，并取消所有断点限制。它和 .container 是两条平行路径，不能混用。
如果想手动控制某一级断点的宽度（比如让 lg 下变成 1024px），不要这样写：
.container {
@media (min-width: 992px) {
max-width: 1024px;
}
}
这会破坏 Bootstrap 原生的断点继承链。正确做法是重定义 Sass 变量：
- 在引入 Bootstrap CSS 前，覆盖
$container-lg: 1024px - 确保你用的是 Sass 编译流程（否则变量无效）
- 别用 CSS 覆盖
.container { max-width: ... }—— 这样会干掉所有断点，退化成固定宽度
常见误判：把断点像素值当成“区间上限”
很多人以为 sm: 576px 意味着“576px 是 sm 的最大宽度”，其实它是 min-width: 576px 的起点。真正决定“哪个 max-width 生效”的，是当前视口宽度匹配的**最高一级已启用断点**。
举例：视口宽 850px，它同时满足 sm（≥576）、md（≥768），但不满足 lg（≥992），所以生效的是 md 对应的 720px，不是 sm 的 540px。
容易漏掉的关键点：断点变量名在 v5 已统一为 $breakpoint-sm，不是旧版的 $screen-sm-min；而容器宽度变量是 $container-sm，两者命名逻辑不同，改的时候得盯紧变量名，不然白改。
