Bootstrap 5导航栏打开后无法关闭，index.html导航组件失效求助

核心问题分析 #

你的代码里重复引入了Bootstrap的JS文件，这是导致导航栏无法关闭、首页链接失效的关键原因：

• bootstrap.bundle.min.js已经集成了Popper.js和Bootstrap核心JS功能
• 后续重复引入的popper.min.js和bootstrap.min.js会破坏Bootstrap的事件绑定逻辑，引发功能异常

另外顺便修正一个非核心错误：Font Awesome的样式引入标签属性有误，link标签需用href而非src。

修正后的完整代码 #

<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
  <div class="container-fluid">
    <a href="index.html" class="navbar-brand">Visa Chronicles</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
      <ul class="navbar-nav">
        <li class="nav-item me-2"><a class="nav-link active" href="index.html" aria-current="true">Home</a></li>
        <li class="nav-item me-2"><a class="nav-link" href="mystory.html" aria-current="page">My Story</a></li>
        <li class="nav-item me-2"><a class="nav-link" href="visaprocess.html" aria-current="page">Visa Process</a></li>
        <li class="nav-item me-2"><a class="nav-link" href="documents.html" aria-current="page">Documents</a></li>
        <li class="nav-item me-2"><a class="nav-link" href="contact.html" aria-current="page">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://kit.fontawesome.com/481d34bf91.css" crossorigin="anonymous">

<!-- 仅保留集成版JS，避免重复加载冲突 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/481d34bf91.js" crossorigin="anonymous"></script>

修正细节说明 #

1. 移除重复的popper.min.js和bootstrap.min.js，仅保留集成了Popper的bootstrap.bundle.min.js
2. 修正Font Awesome样式引入的标签属性和后缀
3. 将Bootstrap 5已弃用的mr-2替换为推荐的me-2（原类名虽兼容，但新类名更符合框架规范）

验证步骤 #

1. 替换index.html中的导航栏及资源引入代码
2. 刷新Gitpod预览页面或重启预览服务
3. 测试导航栏展开/关闭功能，以及所有链接的跳转有效性

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