navbar-expand-*类是bootstrap 5导航栏响应式折叠的必要开关，漏写或写错会导致移动端始终横排、无汉堡菜单；其后缀决定展开临界点（如md对应≥768px展开），且必须配合正确viewport meta和未被覆盖的css规则才能生效。
navbar-expand-* 类写错或漏写，导致移动端始终横排
Bootstrap 5 默认不折叠 navbar，必须显式加 navbar-expand-* 类才能激活响应式折叠逻辑。漏写或写错这个类，是移动端没汉堡图标、菜单强行横排的最常见原因。
它不是可选项，而是开关：没这个类，.navbar-toggler 按钮直接被隐藏，JS 也不绑定事件，整个折叠流程从源头失效。
-
navbar-expand-sm：≥576px 展开（小屏仍折叠） -
navbar-expand-md：≥768px 展开（平板及以上展开） -
navbar-expand-lg：≥992px 展开（桌面才展开，移动端必折叠） -
navbar-expand（无后缀）：所有断点都展开 → 移动端也不会折叠，且.navbar-toggler不渲染
别用 navbar-expand 代替 navbar-expand-lg —— 它等价于 navbar-expand-lg，但语义模糊，容易误判；更关键的是，某些构建工具会把无后缀类当无效值过滤掉。
用了 navbar-expand-* 却还是不折叠？检查断点是否被 CSS 覆盖
即使类名写对，CSS 层级或自定义样式也可能让 .navbar-collapse.collapse 的 display: none 失效。Bootstrap 的折叠依赖这个规则在小屏生效，一旦被 !important 或更高优先级选择器覆盖，菜单就“卡开”不动。
用浏览器开发者工具检查：.navbar-collapse 元素在小屏下是否仍有 display: block（而非 display: none）？如果是，说明响应式规则没命中或被覆盖。
- 确认你加载的是完整
bootstrap.min.css，不是精简版或只引了部分组件 CSS - 搜索项目中是否有全局重置如
.collapse { display: block !important; }这类破坏性声明 - 避免在父容器上设
flex-wrap: wrap或overflow: hidden，可能干扰 collapse 的渲染判断
自定义断点时，@media 查询未匹配到实际视口宽度
如果你用 Sass 自定义了 Bootstrap 断点（比如改了 $grid-breakpoints），但没同步更新 navbar-expand-* 类对应的断点逻辑，就会出现「写了 navbar-expand-md，却在 800px 还折叠」的情况。
根本原因是：这些类名只是快捷方式，背后对应的是预设的 @media (min-width: ...) 查询。修改变量后，必须重新编译 CSS，否则 HTML 中写的 md 仍按原始 768px 判断。
- 检查最终生成的 CSS 中，
@media (min-width: 768px)是否还存在，或已被替换成你自定义的值（如 820px） - 运行时可用
window.matchMedia('(min-width: 768px)').matches手动验证当前视口是否满足断点条件 - 若用 Vite/Webpack，确认 Sass 变量注入路径正确，且未被多次覆盖
移动端模拟器里正常，真机不折叠？检查 viewport meta 设置
很多真机（尤其 iOS Safari）会忽略响应式行为，如果页面缺少正确的 <meta name="viewport"> 声明。没有它，浏览器可能以桌面视口宽度渲染，导致 navbar-expand-sm 等断点完全不触发。
必须确保 中有且仅有一条：
<meta name="viewport" content="width=device-width, initial-scale=1">
别加 user-scalable=no 或 maximum-scale=1 —— 这些会干扰 viewport 解析，间接让媒体查询失效。也别重复声明，多条 meta 会让部分安卓浏览器取第一条而忽略后续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
