Bootstrap 导航栏崩溃无法正常工作 ||导航栏折叠不显示点击链接答案

【问题标题】：Bootstrap navbar collapse not working correctly || navbar collapse not showing links on clickingBootstrap 导航栏崩溃无法正常工作 ||导航栏折叠不显示点击链接
【发布时间】：2021-06-08 11:19:49
【问题描述】：

我正在 Angular 11 中使用 bootstrap 5 构建导航栏

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
 <a class="navbar-brand" routerLink="/">O$hop</a>
 <button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarsExampleDefault"
  aria-controls="navbarsExampleDefault"
  aria-expanded="false"
  aria-label="Toggle navigation"
 >
   <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
         <li class="nav-item">
             <a class="nav-link" routerLink="/shopping-cart">Shopping Cart</a>
         </li>
          <ng-template #anonymousUser>
          <li class="nav-item">
          <a class="nav-link" routerLink="/login">Login</a>
         </li>
          </ng-template>

      <li
        ngbDropdown
        *ngIf="appUser; else anonymousUser"
        class="nav-item dropdown"
      >
      <a
      ngbDropdownToggle
      class="nav-link dropdown-toggle"
      id="dropdown01"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      >{{ appUser.name }}</a
    >
    <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown01">
      <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
      <ng-container *ngIf="appUser.isAdmin">
        <a class="dropdown-item" routerLink="/admin/orders"
          >Manage Orders</a
        >
        <a class="dropdown-item" routerLink="/admin/products"
          >Manage Products</a
        ></ng-container
      >

      <a class="dropdown-item" (click)="logout()">Log Out</a>
    </div>
   </li>
   </ul>
 </div>
</nav>

但在移动屏幕上，折叠按钮不显示购物车和下拉切换链接..任何帮助..我是 Bootstrap 的新手..附加 ss..

Fullscreen on desktop

When viewing on small screen

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我认为您缺少引导 5 工作所需的 JS。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

您可以在此处阅读有关它的更多信息： Bootstrap Introduction

【讨论】：

感谢您的帮助。但我遇到了问题，它需要在 ts 文件中定义一个函数才能使切换工作。