为什么Bootstrap4的汉堡菜单图标在小屏点击后无法显示菜单项？

问题原因 #

• 核心问题是Bootstrap版本不匹配：你引入的是Bootstrap 4的CSS文件，但配套的JS文件用的是Bootstrap 3.4.1版本，两个大版本的组件逻辑不兼容，导致汉堡菜单的折叠交互失效
• 其次是资源加载顺序错误：Bootstrap 4的JS依赖Popper.js，你当前把Popper.js放在Bootstrap JS之后加载，依赖顺序错误
• 小错误：viewport元标签的属性分隔符写错了，你用了分号;应该用逗号,，width-device-width应该是width=device-width

修复方案 #

1. 修正资源引入代码 #

把原有script引入部分替换为以下内容，保证版本匹配、顺序正确：

<!-- 首先引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 其次引入Popper.js -->
<script src="style/popper.min.js"></script>
<!-- 最后引入Bootstrap4版本的JS，不要用Bootstrap3的JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

2. 修正viewport元标签 #

把原有viewport标签替换为：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. （可选）补充CSS全局选择器 #

你当前的CSS开头没有写全局选择器*，如果要让内边距、外边距重置规则生效，修改为：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}
.nav-link:hover{
    color:blue;
    background-color:blueviolet;
} 

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