![](/img/trans.png)
[英]ngx-Bootstrap 4 dropdown and navbar not working with Angular 7
[英]NGX-Bootstrap Navbar dropdown not working
所以我试图在我的导航栏中添加一个下拉菜单。 我修改了 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>
软件:
这可能是由应用于下拉列表的一些其他样式引起的。 但是如果你想在不弄清楚根本问题的情况下修复它,你可以尝试
<li class="nav-item" dropdown container="body">
这会将下拉列表添加到 html 的根目录,而不是在定义它的位置。 这样就不太可能影响页面的布局。
然而,我建议使用浏览器元素检查器,看看究竟是什么应用于你的下拉样式明智。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.