Bootstrap可折叠导航栏无法正常工作

时间:2017-09-13 04:05:41

标签: html angular twitter-bootstrap-3

我的代码和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>

0 个答案:

没有答案