.container 在 xs 断点下宽度为 100% 是因为 Bootstrap 5 默认设置 width: 100% 且在所有设备生效，而 max-width 仅从 sm（≥576px）起作用，xs 下无 max-width 限制，故实际宽度由 width: 100% 决定。
直接设 .container 的 width: 100% 没用——它本来就是 width: 100%，真正起作用的是各断点下的 max-width。强行覆盖 width 不仅无效，还可能在小屏下撑破视口。
为什么 .container 在 xs 断点下是 100% 宽
因为 Bootstrap 5 的 .container 默认声明了 width: 100%，且在 @media (min-width: 0)（即所有设备）下生效；而 max-width 是从 sm（≥576px）才开始介入的。所以小于 576px 时，max-width 不设限，实际宽度就由 width: 100% 决定。
-
xs断点（max-width 规则，等价于没限制 - 你看到的 “
.container在手机上铺满” 是预期行为，不是 bug - 如果想让 xs 下也有限制（比如最多 480px），得自己加媒体查询：
@media (max-width: 575.98px) { .container { max-width: 480px; } }
.container-sm 到 .container-xxl 的 100% 行为差异
这类“断点容器”只在指定断点及更高断点启用 max-width，低断点一律 width: 100%，但不会“反向继承”更宽的值。
-
.container-md：在 width: 100%；从 768px（md）起才应用max-width: 720px -
.container-lg：xs/sm/md 三档都 100%，到 ≥992px 才设max-width: 960px -
.container-xxl：只有 ≥1400px 时才启用max-width: 1320px，其余所有更小断点全是 100% - 不存在“自动升级”逻辑——
.container-lg在 1400px 屏幕上仍是 960px，不会变成 1320px
什么时候该用 width: 100% + max-width，而不是纯 width
Bootstrap 放弃 width 控制容器尺寸，是因为 width: 100% 能保证窄屏填满、大屏不溢出，再靠 max-width 精准截断，这是响应式的基础组合。硬写 width: 1200px 会破坏这个机制。
- 写
width: 1200px→ 小屏下内容被横向拉伸、滚动条出现、布局错位 - 写
width: 100%; max-width: 1200px→ 小屏自适应，大屏卡住上限，符合阅读习惯 - 所有官方容器类（包括
.container-fluid）都基于这个逻辑，只是.container-fluid的max-width永远是none - 自定义容器时，务必沿用
width: 100%; max-width: ...模式，别省略width
最容易被忽略的是：改容器宽度不能只盯 CSS 文件里某一行 max-width，得确认它是否被后续更具体的媒体查询覆盖——比如你改了 xl 断点，但忘了 xxl 断点规则还在后面生效，结果大屏还是老宽度。
