Bootstrap 5 相较于之前的版本做了较多破坏性更新，其中数据属性的调整是导致导航栏折叠功能失效的最常见原因。不少开发者从 Bootstrap 3 或 4 升级到 5 之后，没有修改对应的数据属性，就会出现点击折叠按钮无反应、菜单无法展开的问题。
Bootstrap 5 导航栏数据属性的变化
Bootstrap 5 为了符合 HTML 规范，将所有以 data- 开头的自定义属性统一调整为 data-bs- 前缀，导航栏折叠相关的属性也不例外。以下是核心属性的对比：
| Bootstrap 4 及之前属性 | Bootstrap 5 对应属性 | 作用 |
|---|---|---|
| data-toggle | data-bs-toggle | 指定触发的交互类型，折叠场景值为 collapse |
| data-target | data-bs-target | 指定要操作的折叠元素选择器 |
| data-collapse | data-bs-collapse | 配置折叠组件的参数 |
折叠失效的常见排查步骤
如果遇到导航栏折叠失效，可以按照以下步骤逐一排查：
- 检查是否引入了正确版本的 Bootstrap 5 的 CSS 和 JS 文件，不要混用不同版本的资源
- 确认折叠按钮的
data-bs-toggle属性值是否为 collapse，data-bs-target是否指向正确的折叠菜单容器 ID - 检查折叠菜单容器是否添加了
collapse类，以及对应的 ID 是否和按钮的 target 匹配 - 确认页面中没有其他 JS 代码报错，避免阻塞 Bootstrap 组件的初始化逻辑
完整的迁移代码示例
以下是 Bootstrap 4 和 Bootstrap 5 导航栏的正确写法对比，开发者可以直接参考修改自己的代码：
Bootstrap 4 导航栏写法（已失效）
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
</div>
</nav>
Bootstrap 5 导航栏正确写法
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
</div>
</nav>
额外注意事项
如果导航栏使用了 JS 初始化方式，也需要同步调整属性名。例如之前使用 $('#navbarContent').collapse('show') 的调用方式不需要修改，但如果是通过 data 属性配置参数，就需要把参数名也加上 bs 前缀。
注意：Bootstrap 5 已经不再依赖 jQuery，如果之前的项目中通过 jQuery 操作导航栏相关属性，也需要同步调整为 Bootstrap 5 的原生 JS 调用方式。
完成上述属性迁移后，导航栏的折叠功能就可以正常生效了。如果仍然存在问题，可以检查浏览器控制台是否有报错信息，进一步定位问题原因。
Bootstrap_5导航栏折叠失效数据属性迁移修改时间：2026-07-17 14:36:24