bootstrap响应式失效主因是viewport标签缺失或错误，断点类名未匹配设备宽度，css未加载或被覆盖，以及container/row/col结构不规范。
viewport meta 标签缺失或写错
Bootstrap 响应式断点（xs、sm、md 等）完全依赖浏览器对视口宽度的识别，而这个识别由 <meta name="viewport"> 控制。没它，移动端会强制以桌面宽渲染，所有 col-sm-6 类都等同于 col-12。
常见错误包括：
-
<meta>标签漏写，或放在里（必须在中） - 拼写错误，比如写成
name="viewpoint"或content="width=device" - 使用了过时写法，如遗漏
initial-scale=1，导致 iOS Safari 缩放异常
正确写法只有一行：<meta name="viewport" content="width=device-width, initial-scale=1">。其他属性（如 maximum-scale）非必要且可能干扰断点判断。
断点类名用错或未匹配设备宽度
Bootstrap 的断点不是“自动适配”，而是按媒体查询硬匹配：比如 col-md-6 只在 min-width: 768px 时生效；小于该值就退化为默认（即占满整行）。如果你在手机上看到 col-md-6 没分两列，不是断点“失效”，是它本来就不该生效。
排查要点：
- 检查当前设备/模拟器宽度是否真达到对应断点阈值（Chrome DevTools 切换 device 后看左上角像素值）
- 避免混用不同版本断点前缀：Bootstrap 4/5 用
col-sm-，Bootstrap 3 是col-sm-但起始断点是 768px，而 Bootstrap 5 是 576px —— 版本不一致会导致预期外行为 - 别只写
col-lg-4而不写更小断点类，否则在中屏以下会回退到无栅格状态（即 display: block，无 flex 分配）
推荐写法：class="col-12 col-sm-6 col-md-4"，确保从最小屏开始逐级定义。
CSS 加载失败或被覆盖导致媒体查询不执行
断点样式本质是 CSS 媒体查询规则（如 @media (min-width: 768px) { .col-md-6 { flex: 0 0 50%; } }）。如果 Bootstrap 的 CSS 文件根本没加载成功，这些规则就不存在。
快速验证方式：
- 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 查找
bootstrap.min.css，确认状态码是200，不是404或blocked - 在 Elements 面板中选中一个
col-md-6元素，右侧 Styles 面板搜索flex-basis或max-width，看是否有来自 bootstrap.css 的声明 - 检查是否有更高优先级的自定义 CSS 强行重置了
display: flex或覆盖了flex相关属性（尤其注意父级row被设为display: block）
注意：CDN 链接被截断（例如因邮箱混淆脚本插入 __cf_email__）也会导致 CSS 加载为空，此时 Network 面板可能显示 200 但响应体为空。
container / row / col 结构破坏导致断点逻辑无法触发
Bootstrap 断点类要起作用，前提是它们被应用在符合 Flex 容器层级的元素上。col-*- 类只有作为 row 的直接子元素时，其 width / flex 计算才被媒体查询驱动；如果结构断裂（比如 row 缺失、col 套在 div 里再嵌进 row），断点样式虽然存在，但不会参与布局计算。
典型坏结构：
-
<div class="container"><div class="col-md-6">...</div></div>（缺row） -
<div class="container"><div class="row"><span class="col-md-6">...</span></div></div>（col不是div，但span默认不是 flex item） -
<div class="container"><div class="row"><div class="inner"><div class="col-md-6">...</div></div></div></div>（col不是row的直接子元素）
只要结构不满足 container → row → col 这一链条，哪怕断点类名全对，也只会表现为普通 class，不触发布局逻辑。
