NGX-Bootstrap 导航栏下拉菜单不起作用

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

Answer 1

这可能是由于对下拉菜单应用了一些其他样式。但是如果你想在不弄清楚根本问题的情况下修复它，你可以尝试

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

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

然而，我建议使用浏览器元素检查器，看看究竟是什么应用于您的下拉样式样式。