Bootstrap 5导航栏切换按钮可展开但无法关闭的问题求助

你的问题出在Bootstrap脚本重复引入上。你同时加载了bootstrap.bundle.min.js（这个文件已经包含了Popper.js和Bootstrap核心JS），又额外引入了独立的Popper和bootstrap.min.js，这会导致JS逻辑冲突，让导航栏的切换状态无法正常切换。

解决方案 #

只保留bootstrap.bundle.min.js即可，删掉另外两个重复的脚本引用。修改后的index.html脚本部分如下：

<!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- BOOTSTRAP -->

额外优化（可选） #

Bootstrap 5已经废弃了navbar-header类，你可以把组件里的<div className="navbar-header">直接移除，将navbar-brand直接放在container-fluid下，更符合Bootstrap 5的规范：

// 替换原navbar-header包裹的代码
<a className="navbar-brand" href="/">
  <img src="/images/Full-Color.png" alt="Logo"  className="d-inline-block align-text-top header-logo"/>
</a>

修改完成后，导航栏的切换按钮就能正常展开和关闭了。

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