Irgendeine Idee, warum meine Navigationsleiste in einem kleinen Fenster nicht zusammenbrechen wird?

Question

Ich habe eine Nav-Bar erstellt und gestylt. Wenn ich jedoch das Fenster klein mache und in die rechte Ecke der Schaltfläche klicke, erweitert die Navigationsleiste alle Optionen, und das ist es. Sobald ich auf eine der Optionen klicke, wird sie nicht geschlossen, d. H. Sie wird nicht zurückfallen. Was mache ich falsch? Ich habe mich schon eine Weile damit beschäftigt und kann den Fehler nicht sehen.

Hier ist mein Code:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <!-- use a responsive image option so this logo looks good on devices - recommend using something like retina.js --> 
     <a class="navbar-brand" href="#/">Test</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#/home">Home</a> 
      </li> 
      <li><a href="#/about">About Us</a> 
      </li> 
      <li><a href="#/services">What We Do</a> 
      </li> 
      <li><a href="#/example">Examples</a> 
      </li> 
      <li><a href="#/testimonials">Testimonials</a> 
      </li> 
      <li><a href="#/contact">Contact Us</a> 
      </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

In meinem index.html, verlinke ich auf dem header.html der gut arbeitet und die folgenden Arten:

<link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

Und die javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

Answer 1

Durch Klicken auf die Links wird die Bootstrap-Navigationsleiste nicht automatisch ein-/ausgeblendet. Das ist Absicht.

Wenn Sie wollen, nachdem schließen klicken Sie dies zu den Links hinzufügen können ..

data-toggle="collapse" data-target=".navbar-collapse.in"

Demo: http://www.codeply.com/go/Ia4LLB8Yyp

Sie auch jQuery wie diese verwenden könnte ..

$(document).on('click','.navbar-collapse.in',function(e) { 
    if($(e.target).is('a')) { 
     $(this).collapse('hide'); 
    } 
});