ブートストラップ3で折りたたみ可能なハンバーガーメニューを定義する方法は？

Question

私はナビゲーションバーとメニューを設定して遊んできましたが、ブラウザウィンドウのサイズを変更するとハンバーガーメニューが表示されないようです。

私はデータの切り替えを定義し、メインのナビゲーションバーにターゲットを設定したところで、ブラウザのサイズを変更するときに機能しませんでした。

質問：hambugerメニューは、このマークアップで再サイズにトリガされていない理由

、誰もが知っていますか？

<header> 
    <div class="container-fluid"> 

    //Defined the toggle here, pointing it's data-target to the navBarCollapsable main nav bar. 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBarCollapsable"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navBarCollapsable"> 
     <nav> 
     <ul id="menu" class="nav navbar-nav"> 
      <li><a>Selection:</a></li> 
      <li> 
      <a>Assets <span class="arrow">&#9660</span></a> 
      <ul class="sub-menu"> 
       <li> 
       <a href="#" class="small" data-value="option1" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 1</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option2" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 2</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option3" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 3</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option4" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 4</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option5" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 5</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option6" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 6</a> 
       </li> 
      </ul> 
      </li> 

      <li> 
      <div class="horizontalgap" style="width:10px"></div> 
      </li> 
      <li><a>Profile:</a></li> 
      <li> 
      <a>Assets <span class="arrow">&#9660</span></a> 
      <ul class="sub-menu"> 
       <li> 
       <a href="#" class="small" data-value="option1" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 1</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option2" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 2</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option3" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 3</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option4" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 4</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option5" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 5</a> 
       </li> 
       <li> 
       <a href="#" class="small" data-value="option6" tabindex="-1"> 
        <input type="checkbox" />&nbsp;Option 6</a> 
       </li> 
      </ul> 
      </li> 
      <li> 
      <div class="horizontalgap-md"></div> 
      </li> 
     </ul> 
     </nav> 
    </div> 
    </div> 
</header> 

Answer 1

あなたは、このコードhttp://codepen.io/macsupport/pen/bKFzDを見てみる場合は、両方の彼のメニューの種類がNAVタグに含まれていることがわかりますので<nav>

Answer 2

あなたのタグを使用して、通常のメニューとあなたのハンバーガーメニューの両方を包む試してみてくださいタグの直後に来る。また、jquery.jsファイルがbootstrap.jsの前にロードされていることを確認してください。