Wie definierst du ein reduzierbares Hamburger-Menü in Bootstrap 3?

Question

Ich habe mit meiner Navigationsleiste und Menüeinstellungen herumgespielt, aber es scheint nicht so, als ob das Hamburger-Menü ausgelöst wird, wenn ich mein Browserfenster neu skaliere.

Mein Versuch unten, wo ich den Datenumschalter definiert und sein Ziel auf die Navigationsleiste eingestellt habe, funktionierte nicht, wenn ich den Browser änderte.

Frage:

Weiß jemand, warum das hambuger Menü nicht mit diesem Aufschlag auf die Größe neu Triggerung?

<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

Wenn Sie an diesem Code einen Blick http://codepen.io/macsupport/pen/bKFzD Sie werden sehen, dass seine beiden Menütypen enthalten sind, in dem nav-Tag so versuchen sowohl Ihr normales Menüs Einwickeln und Ihr Hamburger-Menüs mit <nav>

Answer 2

Ihrem Tag soll komm sofort nach dem tag. Stellen Sie außerdem sicher, dass Ihre Datei jquery.js vor bootstrap.js geladen wird.