
bootstrap 5 中 navbar-toggler 不响应点击,通常因使用了 bootstrap 4 的旧版 data 属性(如 `data-toggle`),需替换为 `data-bs-toggle` 和 `data-bs-target` 才能正常触发折叠菜单。
在 Bootstrap 5 中,所有 JavaScript 触发的 data 属性均统一增加了 bs- 命名空间前缀,这是与 Bootstrap 4 最关键的不兼容变更之一。若仍沿用 data-toggle="collapse" 和 data-target="#id",即使引入了正确的 JS 文件,折叠功能也将完全失效——按钮可点击,但菜单不会展开或收起。
✅ 正确写法(Bootstrap 5):
使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。
<button class="navbar-toggler" 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.min.js 或 bootstrap.bundle.min.js 二者之一:bundle 版本已内置 Popper(用于 tooltip/dropdown 等),无需额外引入 Popper;若使用单独的 bootstrap.min.js,则必须前置加载 Popper(如示例中所示)。
- 确保 DOM 加载后初始化:Bootstrap 5 的 JS 组件默认在 DOMContentLoaded 时自动初始化,但请确认脚本标签位于

















