bootstrap 5 中 navbar-toggler 失效，通常是因为仍使用了 bootstrap 4 的 `data-toggle` 和 `data-target` 属性；需替换为 `data-bs-toggle` 和 `data-bs-target`，并确保正确引入 bootstrap 5 的 js 及 popper 依赖。
在 Bootstrap 5 中，官方移除了对 jQuery 的依赖，并统一将所有自定义数据属性（data attributes）前缀从 data-* 改为 data-bs-*，这是为了明确标识其属于 Bootstrap 专属行为，避免与其他库冲突。因此，如果你沿用 Bootstrap 4 的写法（如 data-toggle="collapse"），折叠功能将完全失效——按钮可点击，但菜单不会展开或收起。
✅ 正确写法如下（关键修改已加粗）：
<button class="navbar-toggler ms-auto" type="button" **data-bs-toggle="collapse"** **data-bs-target="#navbarSupportedContent"** aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
同时，请务必检查以下三项依赖是否完整且版本匹配（必须为 Bootstrap 5.x）：
- Popper.js（必需）：Bootstrap 5 的 tooltip、popover、dropdown 等组件依赖 Popper，navbar collapse 虽不直接依赖，但 bootstrap.min.js 内部引用了它；推荐使用 bootstrap.bundle.min.js（已内置 Popper），或单独引入 Popper + Bootstrap JS；
- Bootstrap CSS：确保 <link> 引入的是 Bootstrap 5 的 bootstrap.min.css；
- Bootstrap JS：优先使用 bootstrap.bundle.min.js（含 Popper），避免仅引入 bootstrap.min.js（缺少 Popper 会导致部分交互异常）。
? 示例完整结构（精简版）：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 5 Navbar</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">服务</a></li>
<li class="nav-item"><a class="nav-link" href="#">项目</a></li>
<li class="nav-item"><a class="nav-link" href="#">联系</a></li>
</ul>
</div>
</div>
</nav>
<!-- ✅ 推荐：使用 bundle 版本（含 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>⚠️ 常见错误排查清单：
- ❌ 错误：同时引入 bootstrap.min.js 和 bootstrap.bundle.min.js → 造成重复初始化或冲突；
- ❌ 错误：JS 在 <body> 底部加载，但 DOM 尚未就绪 → 确保脚本放在 </body> 前，或使用 DOMContentLoaded 包裹逻辑；
- ❌ 错误：ID 不匹配 → 检查 data-bs-target 的值（如 #navbarSupportedContent）是否与 .collapse 元素的 id 完全一致（含大小写、空格）；
- ❌ 错误：CSS 被覆盖 → 自定义样式中若设置了 display: none !important 或 height: 0，可能强制隐藏折叠内容。
? 提示：Bootstrap 5 还支持 JavaScript API 手动控制（无需 data 属性）：
const myCollapse = new bootstrap.Collapse('#navbarSupportedContent', {
toggle: false
});
myCollapse.show(); // 或 .hide(), .toggle()只要确保 data-bs-* 属性正确、依赖完整、ID 匹配，navbar-toggler 即可立即恢复正常响应式折叠功能。
