Блог

Я создаю навигационную панель, используя bootstrap 5 в Angular 11

 <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>
 

Но на экране мобильного устройства кнопка collpase не отображает ссылки на корзину покупок и выпадающие списки..Любая помощь ..Я новичок в начальной загрузке…. Прикрепляю ss..

Полноэкранный режим на рабочем столе

При просмотре на маленьком экране

Я думаю, что вам не хватает JS, который необходим для начальной загрузки 5, чтобы он работал.

 <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>
 

Вы можете прочитать больше об этом здесь:
Введение начальной загрузки