2015-05-10 34 views
7

Mit dem folgenden Code versuche ich ein responsives Weblayout zu erstellen, dass bei Reduzierung der Bildschirmgröße eine Navigationsschaltfläche angezeigt wird und bei Auswahl die Seitennavigation auflistet. Ich bin erfolgreich, dass die Umschalttaste anzeigt, aber beim Klicken passiert nichts. Ich habe verschiedene Bootstrap-Beispiele überprüft und kann nicht feststellen, warum meine Fehler aufgetreten sind. Jede Hilfe wäre willkommen.bootstrap navbar toggle funktioniert nicht

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
      </button> 

    <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 

Antwort

5

Sie sind wahrscheinlich nicht die notwendigen Ressourcen (Javascript-Dateien).

versuchen diese Zeilen Code

im Kopfteil des Add HTML-Seite hinzu:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css 
"> 

Bevor Sie den Body-Tag schließen fügen Sie diese:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
+1

Erscheint das Javascript war das Problem. Mein Code vorher war - Ich habe deins eingegeben und es hat jetzt funktioniert. vielen Dank – user289040

+0

Kein Problem, gerne helfen :)! –

Verwandte Themen