Twitter-bootstrap：小さな画面にnavbarが表示されない

Question

私はangular-cliを使ってangular2プロジェクトを忙しくしています...私はブートストラップ3で反応しやすいnavbarを作成しようとしています。私のラップトップの画面ですが、iPhone 5の画面サイズのChrome Devツールでテストすると、崩壊ボタンとブランドのテキストしか見ることができません。 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

は、現在のメニュー項目の3 doesntのサポート非 "SM" ブレークポイント "崩壊" ブートストラップ。 （Bootstrap v4クラスが混在しているようです（つまり、navbar-toggleable-md）。

同様に、あなたはnavbar-togglerとnavbar-toggler-rightv3 uses navbar-toggleとnavbar-toggle-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