我的代码和bootstrap示例之间没有任何区别。当您将页面更改为移动视图时,菜单会切换为可折叠,但单击导航栏图标不会执行任何操作。
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target="#myNavbar">
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' [routerLink]="['/home']">VetTech</a>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' id="myNavbar">
<ul class='nav navbar-nav side-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/selectclasses']">
<span class='glyphicon glyphicon-education'></span> Class Selection
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/credit']">
<span class='glyphicon glyphicon-flag'></span> Credit
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/affiliates']">
<span class='glyphicon glyphicon-list-alt'></span> Affiliates
</a>
</li>
<li *ngIf="!auth.isAuthenticated()"[routerLinkActive]="['link-active']" style="cursor: pointer;">
<a (click)="auth.login()">
<span class='glyphicon glyphicon-user'></span> Signup / Login
</a>
</li>
<li *ngIf="auth.isAuthenticated()" [routerLinkActive]="['link-active']">
<a [routerLink]="['/user']">
<span class='glyphicon glyphicon-home'></span> Profile
</a>
</li>
</ul>
</div>
</div>
</div>