.container-sm 在 Bootstrap 5 中存在，但其含义是“最小在 sm 断点（≥576px）启用最大宽度”，并非仅在小屏生效；误用会导致桌面端宽度被限制。
Container-sm 在 Bootstrap 5 中根本不存在
Bootstrap 5 移除了所有带 -sm、-md 等后缀的 .container 类，只保留 .container、.container-fluid 和响应式变体 .container-{breakpoint}（如 .container-sm 是 *有* 的，但它的行为和你直觉想的相反）。
常见错误现象：.container-sm 写了没效果，或者宽度比预期更宽；有人误以为它“只在小屏生效”，结果在桌面端反而被限制了宽度。
-
.container-sm表示“最小在sm断点及以上才启用容器最大宽度”，即：屏幕 ≥576px 时才应用该尺寸，.container-fluid（100% 宽） - 它的宽度值是
540px，但这个值只在sm及以上断点生效；不是“小屏专用容器” - 真正“只在小屏起作用”的写法不存在——Bootstrap 的
.container-*全是“≥该断点才启用”，没有“仅在该断点”
怎么选 container-lg / container-xl / container-xxl
这些类控制的是“从哪个断点开始应用对应宽度”，不是“只在那个断点生效”。选错会导致大屏内容被意外收窄，或小屏留白过多。
使用场景：需要为不同设备设定内容区最大宽度，比如后台系统在大屏希望内容不拉太开，而移动端允许撑满。
-
.container：等价于.container-md（默认从md断点起效，≥768px 用 720px 宽） -
.container-lg：≥992px 时用 960px 宽；小于此宽度时回退到上一级（md的 720px） -
.container-xxl：≥1400px 时用 1320px 宽；低于此值，按xl→lg→md逐级回退 - 断点顺序必须连续回退，不能跳过；比如用了
.container-xl，就不会用到lg或md的宽度值
为什么 container-sm 在手机上没约束力
因为 .container-sm 的断点是 576px，而几乎所有现代手机竖屏宽度 ≤428px（iPhone 14 Pro 是 390px），所以它压根不触发，直接走 fluid 模式（100% 宽）。
性能 / 兼容性影响：无额外开销，但逻辑误解会引发反复调试——你以为加了限制，其实什么都没限。
- 想让手机也有固定宽度？只能手动写 CSS，比如
max-width: 400px配合margin: 0 auto - Bootstrap 不提供“仅小屏固定宽”的工具类，这是设计取舍，不是遗漏
- 检查是否生效，打开浏览器 DevTools，看元素最终计算出的
max-width值，而不是只盯 class 名
自定义 container 宽度要改 Sass 变量
如果项目需要非标准宽度（比如全站统一 1100px），不能靠叠加多个 .container-* 类解决，必须改源码或编译配置。
参数差异：Bootstrap 5 把容器宽度定义在 $container-max-widths 这个 Sass map 里，每个断点对应一个像素值。
- 修改前需确保使用的是 Sass 版本（CDN 引入的 CSS 文件无法动态改）
- 关键变量名：
$container-max-widths（map）、$container-padding-x（左右内边距） - 示例覆盖：
$container-max-widths: (sm: 100%, md: 750px, lg: 1100px, xl: 1300px, xxl: 100%);
- 改完需重新编译 CSS；否则加再多 class 都只是在用默认值
实际用的时候，最常踩的坑是把 .container-sm 当成“小屏容器”，结果在手机上完全没约束。它本质是个“起始生效断点”，不是“作用范围限定器”。真要精细控制，得看计算后的 max-width，而不是 class 名字。
