我认为这很简单,但我找不到答案。基本上,要在移动设备上的“汉堡包模式”中单击菜单项时关闭引导导航栏,我在其他帖子中添加了data-toggle="collapse"
。但是,如果不在桌面上的汉堡包模式下,也会触发此效果。并在菜单中引起奇怪的行为。如果有帮助,这是一个有角度的项目。如果有任何指令,我可以申请使此行为仅存在于移动视图中?这是我的导航栏组件的HTML:
<div class="float-navbar">
<div class="row no-gutters">
<div class="col-3">
<img class="logo-img" src="\assets\rg_logo_clean_sm.png" style="position: fixed;z-index: 1;" />
</div>
<div class="col-9">
<nav class="navbar navbar-expand-lg navbar-dark header-row backgrd-color">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" style="color: white;" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto " style="align-items: flex-end;">
<li class="nav-item active ">
<a class="nav-link" routerLink="" data-toggle="collapse" data-target=".navbar-collapse">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">Boot Camp</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">Coaching</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/members" data-toggle="collapse" data-target=".navbar-collapse">Members</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse" role="button">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">Sponsors</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>