<p>Bootstrap 5 移动端导航栏不生效主因是漏写或错配 navbar-expand-* 类，导致折叠开关未启用；需检查断点配置、CSS 覆盖、viewport 声明及运行时媒体查询匹配。</p>
Bootstrap 5 的 CSS 样式在移动端“不生效”，90% 是 navbar-expand-* 类根本没写，或者写了但断点逻辑被覆盖或误判——不是媒体查询失效，而是折叠开关压根没打开。
navbar-expand-* 类漏写或后缀错配
Bootstrap 5 的导航栏默认完全不折叠，navbar-expand-* 是唯一启用响应式折叠的开关。漏掉它，.navbar-toggler 按钮不会渲染，JS 也不绑定事件，整个移动端菜单逻辑从源头中断。
-
navbar-expand-md：只在视口 ≥768px 时展开；小于该宽度自动折叠（含所有手机） -
navbar-expand-lg：≥992px 才展开，更安全，适合强移动端优先场景 -
navbar-expand（无后缀）：等价于navbar-expand-lg，但部分构建工具会过滤掉无后缀类，不推荐 - 别用
navbar-expand-sm期望“小屏也展开”——它会让 576px+ 就横排，多数手机（如 iPhone SE）反而不折叠
自定义断点未同步更新 CSS
如果你用 Sass 修改了 $grid-breakpoints（比如把 md 改成 820px），但没重新编译 Bootstrap CSS，HTML 中写的 navbar-expand-md 仍按原始 768px 判断，就会出现「写了 md 却在 800px 还折叠」的错觉。
- 检查最终生成的 CSS 文件里是否存在
@media (min-width: 768px)，或已被替换成你改过的值 - 运行时验证：
window.matchMedia('(min-width: 768px)').matches返回false？说明当前视口没达标，不是样式问题，是断点本身不匹配 - 不要只改变量就以为完事——必须重新执行
npm run build或 Sass 编译流程
自定义 CSS 覆盖了 collapse 的 display 规则
即使类名写对、断点也匹配，如果自定义样式里有 .collapse { display: block !important; } 或更高权重的选择器，.navbar-collapse.collapse 在小屏下就永远保持 display: block，菜单“卡开”不动。
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具检查小屏下
.navbar-collapse元素的 computeddisplay值：应为none（折叠态）或block（展开态） - 搜索项目中是否全局重置了
.collapse、.navbar-collapse或.show - 避免在父容器上加
overflow: hidden或flex-wrap: wrap，它们可能干扰 collapse 的渲染判断
viewport meta 缺失或错误
没有正确声明 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会以桌面视口（通常 980px）渲染页面，导致所有 @media (max-width: ...) 根本不触发——这时你看到的“不生效”，其实是断点压根没跑。
- 确认
<head>中存在且仅存在一个 viewport meta，内容不含拼写错误（如intial-scale） - 某些 CMS 或模板引擎会自动注入 viewport，检查最终 HTML 源码是否被覆盖或重复
- 微信内嵌浏览器（X5 内核）对 viewport 更敏感，缺失时直接退化为 PC 模式
真正难排查的，是断点逻辑和 CSS 层叠的叠加效应：比如你改了 Sass 断点，又在 JS 里动态加了 show 类，再叠加一条全局 !important 规则——这时候 computed 样式里划掉的不止一行，得一层层点开 origin 才能看出哪条赢了。
