Bootstrap 5 导航栏在 Angular 项目上展开但未关闭

Question

我正在使用 Angular 12 和 Bootstrap 5 创建 SPA。我创建了一个共享导航栏组件。当我的导航栏更改为汉堡包菜单按钮时，导航栏会按预期折叠。但是当我尝试关闭它时，没有任何反应。我错过了什么吗？

<nav class="navbar fixed-top navbar-expand-md navbar-dark shadow">
  <div class="container-fluid">
    <a class="navbar-brand" routerLink="/someUrl">Foo</a>
    <button 
     class="navbar-toggler" 
     type="button" 
     data-bs-toggle="collapse" 
     data-bs-target="#navbarToggleContent"
     aria-controls="navbarToggleContent" 
     aria-expanded="false" 
     aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggleContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item p-2">
         Item 1
        </li>
        <li class="nav-item p-2">
         Item 2
        </li>
        <li class="nav-item p-2">
         Item 3
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

这段代码没问题。我忘记将 popper.js 条目添加到我的 angular.json 文件中。

Bootstrap 5 导航栏在 Angular 项目上展开但未关闭

Bootstrap 5 navbar does expand but doesn't close on Angular project

html

twitter-bootstrap

angular

bootstrap-5