为什么我的Bootstrap导航栏toggle切换按钮在移动端点击无响应？

问题原因 #

你使用的Bootstrap 4导航栏的移动端折叠切换功能，依赖jQuery、Popper.js以及Bootstrap自带的JavaScript脚本才能运行，你当前的代码仅引入了Bootstrap的CSS样式文件，缺失必要的JS依赖，因此点击toggle按钮没有响应。

解决方法 #

不需要你手动编写JavaScript代码，只需要在页面的</body>结束标签之前，添加以下三个JS依赖引用即可：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

注意三个脚本的引入顺序不能调整，必须按照jQuery→Popper.js→Bootstrap JS的顺序引入才能正常生效

添加完成后你的页面body部分结构参考如下：

<body>
<!-- 你原本的导航栏等所有页面代码 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 导航栏原有内容 -->
</nav>

<!-- 新增的三个JS引用放在body结束前 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

修改完成后刷新页面，即可正常点击toggle按钮展开/折叠导航栏。

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