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

Question

因此，我试图在我的导航栏中添加一个下拉菜单。我修改了ngx-bootstrap上的下拉列表的示例，以匹配bootstraps navbar示例中的下拉列表，但其仍无法正常工作。当我单击下拉菜单时，它不仅显示下拉菜单项，而且还会展开整个导航栏，如下所示。

Navigation-bar.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>

软件：

• 最新角度
• Bootstrap 4
• Ngx-bootstrap

Answer 1

这可能是由于将其他样式应用于下拉菜单引起的。但是，如果您想在不解决根本问题的情况下对其进行修复，则可以尝试

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

这会将下拉列表添加到html的根目录，而不是在其定义的位置。这样，不太可能影响页面的布局。

但是，我建议使用browsers元素检查器，并仔细查看样式中对下拉菜单的确切应用。