所以我试图在我的导航栏中添加一个下拉菜单。我修改了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>
软件: