Bootstrap5 移动端菜单图标点击无效问题修复咨询

你的问题出在Bootstrap版本的属性命名差异上：

• Bootstrap 5 对所有数据属性添加了bs-命名空间，替代了Bootstrap 4中的无前缀写法。你当前按钮使用的data-toggle和data-target是旧版语法，Bootstrap 5无法识别，导致点击菜单图标没有反应。

修复方法很简单，修改菜单按钮的属性：

将原按钮代码：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

替换为：

<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>

修改后，移动端点击菜单图标就能正常展开导航项了。你的页面已经正确引入了Bootstrap 5的CSS和JS文件（包括Popper.js），所以只需调整这两个属性即可解决问题。

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee