viewport meta标签写错或缺失是断点失效的首要原因，必须置于<head>中、name为"viewport"、content含"width=device-width, initial-scale=1"。
viewport meta 标签是否写对且在正确位置
断点失效的第一怀疑对象就是 <meta name="viewport">。它不是可有可无的装饰，而是 Bootstrap 媒体查询能触发的前提。漏掉、拼错、放错位置，都会让 col-sm-6 在手机上直接当 col-12 用。
必须满足三个条件：
-
<meta>标签在<head>内，不能塞进<body> - name 是
"viewport"（不是"viewpoint"或其他变体） - content 至少包含
"width=device-width, initial-scale=1"；删掉maximum-scale、user-scalable等干扰项
验证方法：在 Chrome DevTools 的 Elements 面板里搜 viewport，确认它存在且内容正确；再看 Console 里有没有报“viewport not set”类警告。
断点类名是否匹配当前视口宽度
Bootstrap 的断点不是“智能适配”，而是硬性匹配媒体查询阈值。比如 col-md-6 只在 min-width: 768px（Bootstrap 5 是 768px，Bootstrap 4 是 768px，Bootstrap 3 是 768px）生效——如果你在宽度为 767px 的设备上看它没分两列，不是失效，是它本来就不该生效。
排查要点：
- 用 DevTools 切换设备后，左上角看真实像素宽度，别凭感觉判断“这应该是小屏”
- 检查 HTML 中写的断点前缀是否与你用的 Bootstrap 版本一致：
col-sm-在 v4/v5 起始是 576px，在 v3 是 768px - 别只写
col-lg-4，必须补全更小断点，如class="col-12 col-sm-6 col-md-4"，否则小屏下会退化为无栅格行为
CSS 是否加载成功或被覆盖
所有断点样式都靠 CSS 媒体查询实现，比如 @media (min-width: 768px) { .col-md-6 { flex: 0 0 50%; } }。如果 bootstrap.min.css 没加载，这些规则就根本不存在。
快速验证方式：
- Network 标签页里找
bootstrap.min.css，状态码必须是200，不是404或blocked - Elements 面板选中一个
col-md-6元素，在 Styles 面板搜索flex-basis或max-width，看是否有来自 Bootstrap 的声明 - 重点检查是否用了
!important锁死了 display/flex 相关属性——例如全局写了.row { display: block !important; }，那row就永远变不成display: flex，栅格直接崩
navbar-expand-* 类是否写对且未被覆盖
导航栏折叠失效，90% 是因为 navbar-expand-* 类写错或漏掉。它不是锦上添花，而是折叠逻辑的开关：没这个类，.navbar-toggler 根本不渲染，JS 也不绑定事件。
常见错误：
- 写了
navbar-expand（无后缀），等价于navbar-expand-lg，但某些构建工具会过滤掉这种写法 - 用了
navbar-expand-sm却忘了现代手机横屏常超 576px，结果菜单始终展开 - 自定义了 Sass 断点变量（如
$grid-breakpoints）但没重编译 CSS，HTML 里写的md还按原始 768px 匹配，而实际 CSS 已变成 820px - 在自定义 CSS 里写了
.collapse { display: block !important; }，直接干掉 Bootstrap 的display: none响应式规则
真正难定位的是那些偷偷注入的 !important：第三方模板、CMS 自动添加、Sass 编译时 @extend 带出的副作用——它们不会出现在你写的源码里，却能在 Computed 面板里看到 display 值旁标着 “来自某个 ID 选择器 + !important”。
