col-sm-6在iPhone竖屏不生效是因为断点未命中，其min-width:576px高于iPhone常见宽度375px/414px，实际回退为col-12；需显式添加col-6兜底。
为什么col-sm-6在iPhone上还是占满一行
不是手机坏了，是断点根本没命中。sm对应@media (min-width: 576px)，而多数iPhone竖屏宽度是375px或414px——低于576px，所以col-sm-6压根不生效，回退到默认的col-12（即100%宽）。真正起效的是无前缀类，比如col-6，它从0px就开始管。
常见误操作：col-sm-6 col-md-4单独写，指望小屏也按6列分；结果小屏下既没col-*也没col-sm-*兜底，浏览器直接按块级元素撑满。
- 必须显式写
col-6 col-sm-6 col-md-4：小屏用col-6，≥576px才切到col-sm-6，≥768px再切col-md-4 - 别信“横屏调试”：真实用户几乎不用横屏看导航栏，切回375px竖屏验证才准
- 用DevTools的Computed面板查
flex-basis或max-width，如果值是100%且来源被划掉，说明断点类没加载
offset-md-3在安卓机上完全没空隙
offset-md-3只在≥992px生效，而安卓主流屏宽是360–412px，远低于阈值。它不是“失效”，是压根没被CSS引擎解析——浏览器连这条规则都懒得读。
Bootstrap 5 已移除所有无断点的offset-*类，所以offset-3也不合法。想小屏偏移，只有两个靠谱办法：
- 用
ms-auto右对齐（适合单个元素） - 插一个
col-3占位，再跟目标列（如col-9），语义清晰、响应式可控 - 检查同一
.row里所有col-*和offset-*数字之和是否≤12：比如col-md-8 offset-md-5加起来13，这列会直接掉到下一行，看起来像“偏移消失”
改了$grid-breakpoints但d-lg-none还是按992px隐藏
改Sass变量后没重编译CSS，等于白改。CDN用户永远用的是原始断点值，data-bs-breakpoint="lg"这种JS参数也只会查你编译后的CSS里有没有对应媒体查询。
关键检查点：
- 确保自定义
$grid-breakpoints在bootstrap.scss导入之前加载，顺序错就无效 -
$container-max-widths必须同步更新，否则.container在新断点下宽度错乱 - Offcanvas、Navbar等组件依赖断点名查表，如果你把
lg改成xl，但HTML里还写data-bs-breakpoint="lg"，它就真按旧值切
微信内置浏览器里hidden sm:block有时还显示
微信X5内核对响应式工具类解析不稳定，尤其当<meta name="viewport">缺失或CSS动态注入时，hidden可能被跳过。
必须做三件事：
- 强制加
<meta name="viewport" content="width=device-width, initial-scale=1">，缺这个，所有断点类都形同虚设 - 避免嵌套多层响应式类，比如
hidden sm:block md:hidden lg:block，X5容易漏掉中间某段 - 关键遮罩层可临时用
style="display:none"兜底，但仅限紧急场景，别滥用
col-6）或断点名不匹配（如Bootstrap 5用xxl却写xxxl），都会让整条响应链断裂。 
