Twitter-bootstrap：导航栏未显示在小屏幕上

Question

我正忙于使用 angular-cli 的 angular2 项目...我正在尝试使用 bootstrap 3 创建一个响应式导航栏并遇到一些问题...导航栏显示在我笔记本电脑的屏幕上，但是当我在 chrome dev 中对其进行测试时iPhone 5 屏幕尺寸的工具我只能看到折叠按钮和品牌文字...知道我做错了什么吗？难道是jQuery没有加载？如果是这样，我如何测试它是否已加载（使用 ng-cli）？

我的导航栏代码：

<nav class="navbar navbar-toggleable-md navbar-light">


        <div class="navbar-header">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria="navbarSupportedContent" aria-expanded="false" aria-label="toggle navigation"><span class="icon-bar"></span></button>                       
        </div>
        <a class="navbar-brand" href="#">Retail Mobile</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav navbar-nav">
                <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/home']"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/checkBarcodes']"><span class="glyphicon glyphicon-barcode"></span> Check Barcodes</a></li>
                <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/stockTake']"><span class="glyphicon glyphicon-folder-open"></span> Stock Take</a></li>
                <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/settings']"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>                
            </ul>
    </div>

</nav>


my jQuery import in angular-cli.json:

"scripts": [
        "./../node_modules/jquery/dist/jquery.min.js"
      ],

Answer 1

目前 bootstrap 3 不支持菜单项的非“sm”断点“折叠”。 （您似乎在 ie.navbar-toggleable-md 中混入了一些 Bootstrap v4 类）。

同样，当v3 uses navbar-toggle 和navbar-toggle-right 时，您尝试使用navbar-toggler 和navbar-toggler-right 来引用v4 toggler。

最后一个问题是 navbar-light 颜色也是 v4，因此 navbar-toggle 的 icon-bar 在没有额外 css 的情况下显示为白底白字。

其他 CSS

.navbar-light .navbar-toggle .icon-bar {
    background: black;
}

更新的 HTML

<nav class="navbar navbar-light">
    <div class="navbar-header">
        <button class="navbar-toggle navbar-toggle-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria="navbarSupportedContent" aria-expanded="false" aria-label="toggle navigation"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <a class="navbar-brand" href="#">Retail Mobile</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav">
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/home']"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/checkBarcodes']"><span class="glyphicon glyphicon-barcode"></span> Check Barcodes</a></li>
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/stockTake']"><span class="glyphicon glyphicon-folder-open"></span> Stock Take</a></li>
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" class="nav-item"><a [routerLink]="['/settings']"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
        </ul>
    </div>

</nav>

JSFIDDLE