Bootstrap 4 Navbar Toggle Icon点击无响应问题求助

常见原因及对应解决方法 #

• 版本属性不匹配
  你当前代码中使用的data-toggle、data-target是Bootstrap 4的专属属性，如果你项目中引入的是Bootstrap 5版本，交互属性前缀已改为data-bs-，需要修改按钮的对应属性：

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

• 缺少JavaScript依赖引入
  Bootstrap的折叠、弹窗等交互组件必须引入对应的JS文件才能生效，不同版本的依赖要求不同：
  1. 如果你使用Bootstrap 4，需要按顺序在</body>标签前引入jQuery、Popper.js、Bootstrap JS，顺序不能颠倒：

  <!-- 先引入jQuery资源 -->
  <script src="本地jQuery文件存储路径"></script>
  <!-- 再引入Popper.js资源 -->
  <script src="本地Popper.js文件存储路径"></script>
  <!-- 最后引入Bootstrap4 JS资源 -->
  <script src="本地Bootstrap4 JS文件存储路径"></script>
  

  2. 如果你使用Bootstrap 5，不需要依赖jQuery，直接引入Bootstrap的整合JS包即可：

  <!-- 引入Bootstrap5 整合JS包（已内置Popper.js） -->
  <script src="本地Bootstrap5 JS文件存储路径"></script>
  

• ID匹配错误
  确认按钮的data-target/data-bs-target属性值和折叠容器的id完全一致，你当前代码中二者都是navbarNavDropdown，匹配是正确的，后续修改代码注意不要写错大小写或者拼写即可。

内容的提问来源于stack exchange，提问作者user15256253