.container-sm 在手机竖屏无效是设计逻辑而非 bug，因其生效条件为屏幕宽度 ≥576px，而主流手机竖屏均 ≤428px，故小屏下等同于 .container-fluid（100% 宽）。
Container-sm 在手机上没效果，不是 bug 是设计逻辑
你加了 .container-sm，但 iPhone 竖屏下宽度还是 100%，这是因为它的生效条件是「屏幕 ≥576px」——而几乎所有现代手机竖屏都 ≤428px（iPhone 14 Pro 是 390px），压根不触发。它不会“在小屏起作用”，而是“从小屏往上才开始限制”。
常见错误现象：.container-sm 写了却像没写，或者桌面端内容被意外收窄到 540px；有人以为它是“小屏专用”，结果大屏反而变窄了。
-
.container-sm的断点是sm（≥576px），该断点以下等同于.container-fluid（100% 宽） - 真正想让手机也有固定宽度？Bootstrap 不提供“仅小屏固定宽”的类，得手动加 CSS，比如
max-width: 400px; margin: 0 auto; - 检查是否生效，别只看 class 名，打开 DevTools 查元素最终计算出的
max-width值
Container-md 是默认容器，但很多人误以为它叫 .container-sm
.container 在 Bootstrap 5 中等价于 .container-md，即从 md 断点（≥768px）开始启用 720px 宽度；更小屏幕下回退为 100% 宽。这不是“中屏专属”，而是“≥768px 才限制，小于它就撑满”。
- 如果你希望内容在 iPad 横屏（≈1024px）也保持较窄宽度，用
.container-lg更合适（≥992px 启用 960px） - 误用
.container-sm替代.container，会导致桌面端宽度被卡死在 540px，远窄于常规阅读舒适区 - 所有
.container-{breakpoint}类都遵循“≥该断点才启用”，不存在“仅在该断点”
选错 container 类会让大屏内容被意外收窄
比如用了 .container-lg，但没意识到它在 ≥992px 时才启用 960px，而 992–1199px 区间内不会升到 xl 的 1140px；如果页面主要用户是 2K 显示器（≥2560px），内容可能始终卡在 1320px（xxl 的值），而不是你预期的更宽松布局。
-
.container-xl：≥1200px 启用 1140px（注意不是 1200px），低于它会逐级回退到lg→md→sm→xs，不能跳过中间断点 - 想全局统一 1100px？不能靠叠加多个类解决，必须改 Sass 变量
$container-max-widths - 直接写
.container { max-width: 1100px !important }会破坏响应式链条，导致所有尺寸都强制 1100px，小屏横向溢出
修改容器最大宽度必须改 Sass 变量，不能靠覆盖 CSS
Bootstrap 的容器宽度由 $container-max-widths 这个 Sass map 控制，例如：
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px );
这个变量必须在引入 Bootstrap 源码前重定义，且所有键名（sm/md/…）都要保留，缺一个就会回退到默认值。
- 只改某一个断点？用
map-merge更安全，比如只调大xl：$container-max-widths: map-merge($container-max-widths, (xl: 1200px)); - 改完必须重新编译 CSS，热更新或直接改
bootstrap.min.css无效 - 如果项目没用 Sass，又需要局部调整，只能手写媒体查询，但要注意和原生断点对齐（如
@media (min-width: 992px)）
.container-sm 就“管小屏”，其实它连小屏边都没碰到；而真正影响体验的，往往是大屏下未适配的宽度回退逻辑。
