bootstrap 5 中 navbar-toggler 不生效，通常是因为仍使用了 bootstrap 4 的 `data-toggle` 和 `data-target` 属性，而 bootstrap 5 已统一改为带 `bs-` 前缀的 `data-bs-toggle` 和 `data-bs-target`。
在 Bootstrap 5 中，JavaScript 插件的 data 属性命名规范已全面更新，所有交互式组件（如 Collapse、Modal、Dropdown 等）均要求使用 data-bs-* 命名空间，以避免与第三方库或自定义属性冲突。若继续沿用 Bootstrap 4 的 data-toggle="collapse" 和 data-target="#id"，浏览器将无法识别并触发折叠逻辑，导致移动端点击汉堡图标后菜单完全不展开。
✅ 正确写法（关键修改）：
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" <!-- ✅ 注意：bs- 前缀 --> data-bs-target="#navbarSupportedContent" <!-- ✅ 同样需加 bs- --> aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
⚠️ 同时需确保以下依赖完整加载（顺序不可颠倒）：
- Popper.js（v2+，用于定位，Bootstrap 5 依赖它处理下拉/弹出类组件）
- Bootstrap 5 的 bootstrap.min.js（不要同时引入 bootstrap.bundle.min.js 和 bootstrap.min.js，后者已内置 Popper；若用 bundle 版，则无需额外引入 Popper）
推荐的脚本引入方式（精简且兼容）：
<!-- 在 body 底部 --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
? 提示：bootstrap.bundle.min.js 已包含 Popper，因此若使用该文件，请删除单独的 Popper 引入，否则可能引发重复定义错误。
此外，还需检查：
- HTML 结构中 .navbar-collapse 与 id="navbarSupportedContent" 是否严格匹配（大小写、拼写、空格）；
- 是否遗漏 bootstrap.min.css 样式文件（图标、响应式断点、隐藏/显示逻辑均依赖 CSS）；
- 浏览器控制台是否有 404（资源未加载）或 JavaScript 报错（如 Uncaught TypeError: Cannot read property 'addEventListener' of null），这往往指向 DOM 元素未就绪或选择器错误。
最后，建议使用官方 Starter Template 初始化项目，避免因基础结构缺失导致功能异常。一个最小可运行的 Bootstrap 5 navbar 示例应包含完整的 DOCTYPE、viewport meta、CSS 引入、合法语义化结构及正确 JS 加载顺序——任何一环缺失都可能导致 toggler 静默失败。
