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”断点“崩溃”。（您似乎将一些Bootstrap v4类混合在一起，即。navbar-toggleable-md）。

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

最后一个问题是navbar-light颜色也是v4，因此navbar-toggle的{{1}}在白色上显示为白色而没有额外的css。

其他CSS

icon-bar

更新了HTML

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

<强> JSFIDDLE

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

1 个答案: