NGX-Bootstrap Navbar 下拉菜單不起作用

Question

所以我試圖在我的導航欄中添加一個下拉菜單。 我修改了 ngx-bootstrap 上的下拉示例以匹配引導導航欄示例中的下拉列表，但它仍然無法正常工作。 當我單擊下拉菜單時，它不僅會顯示下拉項目，還會像下面一樣展開整個導航欄。

導航欄.html

<nav class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Control Center</a>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="/login" *ngIf="!isAuthenticated">Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/admin" *ngIf="isAuthenticated">Admin</a>
    </li>
    <li class="nav-item" dropdown>
        <a id="button-basic" dropdownToggle type class="nav-link dropdown-toggle"
                aria-controls="dropdown-basic">
          Button dropdown <span class="caret"></span>
    </a>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
            role="menu" aria-labelledby="button-basic">
          <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
          <li class="divider dropdown-divider"></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
          </li>
        </ul>
      </li>


    <li class="nav-item">
      <a class="nav-link" *ngIf="isAuthenticated" (click)="onLogout()"
        >Logout</a
      >
    </li>
  </ul>
</nav>

軟件：

• 最新角度
• 引導程序 4
• Ngx-bootstrap

Answer 1

這可能是由應用於下拉列表的一些其他樣式引起的。 但是如果你想在不弄清楚根本問題的情況下修復它，你可以嘗試

<li class="nav-item" dropdown container="body">

這會將下拉列表添加到 html 的根目錄，而不是在定義它的位置。 這樣就不太可能影響頁面的布局。

然而，我建議使用瀏覽器元素檢查器，看看究竟是什么應用於你的下拉樣式明智。