下拉框在导航栏中展开

问题描述

我希望拥有一个不会在任何设备上折叠的导航栏，我使用了Bootstrap，但是当我尝试打开 768px 以下的expand dropdowm列表框时，它会在{ {1}}。并且看起来很丑，尽管我使用了 sm 类，但它无法正常工作，并在 md

中崩溃了

HTML

navbar

CSS

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" routerLink="/"><i class="fa fa-leaf" aria-hidden="true"></i> NAV BRAND</a>
    
    <div id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto pull-left pull-top ">
        <li class="nav-item active">
          <a class="nav-link" routerLink="/shopping-cart" routerLinkActive="active" style="margin-right:10px">
            <i class="fas fa-shopping-cart"></i>
            <span class="badge badge-warning badge-pill"
              *ngIf="cart$ | async as cart">
                    {{ cart.totalItemsCount }}
            </span>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li
          *ngIf="appUser; else anonymousUser"
          ngbDropdown
          class="nav-item dropdown"
        >
          <a
            ngbDropdownToggle
            class="nav-link dropdown-toggle"
            id="dropdown01"
            button class="btn btn-primary"
            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()">logout</a>
          </div>
        </li>
        <ng-template #anonymousUser>
          <li class="nav-item">
            <a class="nav-link" button class="btn btn-primary"   (click)="login()">Login</a>
          </li>
        </ng-template>
      </ul>
    </div>
  </div>
</nav>

解决方法

我不确定，但是我认为class和id仅支持同时使用3种不同的样式，您已经通过了5号槽，因此现在您需要检查5种不同的样式以查看位置：固定；是否固定？在其中之一中或正在压倒它。而且我没有看到任何JavaScript。...