Bootstrap 5 的 .container 宽度由6个断点控制：xs(0px)、sm(576px)、md(768px)、lg(992px)、xl(1200px)、xxl(1400px)，对应阶梯式 max-width 切换，其中 xs 无需媒体查询，实际生成5组 @media 规则。
Bootstrap 5 的 .container 宽度不是“平滑变化”，而是按断点阶梯式切换 max-width 值；所谓“跟随屏幕”是 CSS 媒体查询在起作用，不是连续插值。
容器宽度由哪些断点控制？
Bootstrap 5 定义了 5 个响应式断点：xs（sm（≥768px）、md（≥992px）、lg（≥1200px）、xl（≥1400px）。每个断点对应一个 max-width 值：
-
.container在xs下无max-width（即 100%） -
sm→540px -
md→720px -
lg→960px -
xl→1140px -
xxl（≥1400px）→1320px（这是 Bootstrap 5 新增的断点，4 版本没有）
这些值写死在 bootstrap.css 的媒体查询里，比如：
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
浏览器只在断点触发时切换样式，中间宽度变化不会重算 max-width。
为什么改了屏幕宽度，容器宽度“跳变”而不是渐变？
因为 max-width 是离散设置的，不是用 clamp() 或视口单位（如 vw）动态计算的。你拖动窗口时看到的“跳”是正常行为，不是 bug。
- 例如：从 1399px 拉到 1400px，
.container会从1140px突然变成1320px - 想实现真正平滑缩放？得自己覆盖样式，比如用
max-width: clamp(540px, 85vw, 1320px) - 但注意：这样会破坏 Bootstrap 原有网格对齐逻辑，
.col类可能不再精准对齐断点
.container-fluid 和自定义 max-width 的区别
.container-fluid 就是 width: 100% + 内边距，它不设 max-width，所以始终撑满视口——但它依然受父级约束，如果父元素有 max-width，它也会被截断。
- 常见误操作：给
.container-fluid外层套一个.container，结果它被限制住了 - 正确做法：确保它直接挂载在
下，或父级无宽度限制 - 若需“带内边距的全宽但不超过 1320px”，应写：
max-w-1320类）
调试时容易忽略的关键点
检查容器实际宽度，别只看 DevTools 的“Computed”面板里写的 max-width 值——它可能被更具体的规则覆盖。
- 用 DevTools 的“Styles”面板确认当前生效的是哪个媒体查询块
- 注意：某些定制主题或 CMS（如 WordPress 的 Block Theme）会重写
.container的断点值 -
.container-sm这类类名不是“最小宽度容器”，而是“从 sm 断点开始才启用max-width”，xs下仍是 100% - 如果你用的是 Sass 版本，修改
$container-max-widthsmap 后必须重新编译 CSS，仅改 JS 不生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
