根本原因是“开关没开+触发器失效+样式被盖住”三重叠加：navbar-expand-*类漏写则.navbar-toggler不渲染；data-bs-toggle与data-bs-target缺失或不匹配导致点击无响应；bootstrap.bundle.min.js未加载或CSS覆盖.collapse显隐规则会使菜单卡住或不可见。
根本原因不是“没写对”，而是“开关没开+触发器失效+样式被盖住”三重叠加——漏掉任意一环，汉堡菜单就彻底消失。
navbar-expand-* 类漏写或写错，汉堡按钮直接不渲染
Bootstrap 5 默认禁用折叠逻辑，navbar-expand-* 是硬性开关，不是可选项。没它，.navbar-toggler 元素会被 CSS 设为 display: none，连按钮都看不到。
-
navbar-expand-md：≥768px 展开（移动端强制折叠，推荐） -
navbar-expand-lg：≥992px 展开（更保守，确保小屏必折叠） - 绝对不要写
navbar-expand（无后缀）：语义模糊，部分构建工具会过滤掉，等价于navbar-expand-lg但不可靠 - 检查最终 HTML 源码，确认
<nav>标签上确实存在该类，而不是被模板引擎或 JS 动态删掉了
data-bs-toggle 和 data-bs-target 缺失或不匹配，点击无响应
按钮能显示，但点了没反应？大概率是这两个属性没配对成功。Bootstrap 5 完全依赖它们触发 JS 初始化，写错一个字母就静默失效。
- 必须同时存在：
data-bs-toggle="collapse"和data-bs-target="#navbarContent" - ID 必须完全一致：大小写、连字符、空格都不能差（比如
#navbarContent末尾多空格就失败） - 不能用
href="#navbarContent"替代data-bs-target，Bootstrap 5+ 已废弃 href 触发方式 - 目标容器必须同时有
class="collapse navbar-collapse"和对应id，缺collapse类，JS 找不到目标
bootstrap.bundle.min.js 未加载或重复加载，折叠逻辑静默崩溃
只引 CSS 是绝对不行的；只引 bootstrap.min.js（不含 Popper）也会让 collapse 失效，且控制台不报错——这是最隐蔽的坑。
- 必须加载
bootstrap.bundle.min.js（含 Popper），不要额外再引@popperjs/core，否则控制台报Popper is already loaded - 禁止同时引入
bootstrap.bundle.min.js和bootstrap.min.js：会导致 Collapse 插件重复注册，表现为“能展开不能收起” - 脚本标签放在
</body>前，确保 DOM 就绪；若放<head>，必须加defer - 用浏览器控制台执行
typeof bootstrap，返回"object"才算加载成功
自定义 CSS 或媒体查询覆盖了 collapse 的 display 规则
按钮可见、JS 加载正常、结构也对，但点开后菜单“卡在半开状态”或者根本不动——大概率是 CSS 把 .collapse 的响应式显隐规则干掉了。
- 用开发者工具检查
.navbar-collapse在小屏下是否仍为display: block（应为display: none） - 搜索全局 CSS 中是否有类似
.collapse { display: block !important }这种破坏性重置 - 避免在父级设
overflow: hidden或flex-wrap: wrap，可能干扰 collapse 的高度计算 - 如果自定义了 Bootstrap 断点（如改了
$grid-breakpoints），必须重新编译 CSS，否则 HTML 写的navbar-expand-md仍按原始 768px 判断，而实际视口已变
真正难排查的是组合问题：比如类名写对了，但 JS 被重复加载导致 toggle 行为紊乱；或者 CSS 覆盖了 collapse，但你只盯着 HTML 结构找 bug。动手前先打开控制台看 bootstrap 是否存在、检查最终渲染的 HTML 是否含 navbar-expand-* 和正确 ID、再验证小屏下 .collapse 的 display 值——顺序不能乱。
