Bootstrap折叠导航栏点击不展开问题求助

我用自定义Bootstrap导航栏（将链接分置栏两端），想实现小屏幕下点击折叠按钮展开菜单，但目前屏幕缩小时链接会折叠，点击折叠按钮完全没反应。

依赖配置（package.json） #

"dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.7",
    "bootstrap": "^5.3.2",
    "express": "^4.18.2",
    "jquery": "^3.7.1",
    "popper.js": "^1.16.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
},

Angular配置（angular.json） #

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js", 
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],

导航栏HTML代码 #

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-primary navbar-fixed-top">
    <img src="../../assets/fb-helmet.png" alt="Logo" class="helmet-logo">
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Teams </a>
        

        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Seasons
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">2023</a>
            <a class="dropdown-item" href="#">2022</a>
            <a class="dropdown-item" href="#">2021</a>
          </div>
        </div>


      </div>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup" >
        <div class="navbar-nav" id="Auth-buttons">
            <a class="nav-item nav-link" href="#">Sign In</a>
            <a class="nav-item nav-link" href="#">Sign Up</a>
            </div>
    </div>
  </nav>
</header>

已尝试的方法 #

• 在index.html添加Stack Overflow相关帖子中的脚本，无变化；
• 用开发者工具调试时找不到Bootstrap脚本文件，点击断点也无信息。

解决方案 #

1. 修正Bootstrap 5的属性命名 #

Bootstrap 5对折叠按钮的属性做了修改，将旧版的data-toggle和data-target改为data-bs-toggle和data-bs-target，这是按钮无响应的核心原因之一。修改折叠按钮代码：

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

2. 修复重复ID问题 #

页面中存在两个相同的id="navbarNavAltMarkup"，ID必须唯一，Bootstrap无法同时绑定多个相同ID的容器。推荐将两个导航容器合并到一个折叠容器中，用Bootstrap的flex类实现两端对齐：

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-primary navbar-fixed-top">
    <img src="../../assets/fb-helmet.png" alt="Logo" class="helmet-logo">
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between" id="navbarNav">
      <!-- 左侧导航 -->
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Teams </a>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Seasons
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">2023</a>
            <a class="dropdown-item" href="#">2022</a>
            <a class="dropdown-item" href="#">2021</a>
          </div>
        </div>
      </div>
      <!-- 右侧导航 -->
      <div class="navbar-nav" id="Auth-buttons">
          <a class="nav-item nav-link" href="#">Sign In</a>
          <a class="nav-item nav-link" href="#">Sign Up</a>
      </div>
    </div>
  </nav>
</header>

3. 确保Bootstrap脚本正确加载 #

• 移除冗余依赖：Bootstrap 5的bootstrap.bundle.min.js已经包含Popper，无需单独安装popper.js，可以删除package.json中的popper.js依赖，避免版本冲突。
• 重启开发服务器：修改angular.json或依赖后，重启Angular CLI服务（ng serve），确保脚本被正确打包加载。
• 验证脚本加载：在浏览器开发者工具的Sources面板中搜索bootstrap，确认bootstrap.bundle.min.js已加载；若未找到，检查angular.json中的scripts路径是否正确，确保文件存在于node_modules/bootstrap/dist/js/目录下。

4. 可选：移除jQuery依赖 #

Bootstrap 5不再强制依赖jQuery，若项目中没有其他地方用到jQuery，可以从package.json和angular.json中移除jQuery，进一步简化配置。

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