2016-11-05 26 views
-3

Meine bootstrap navbar, die ich aus dem Bootstrap-Jumbotron-Beispiel habe, wird nicht zusammenbrechen. Wenn es ist, dass ich nicht das richtige Javascript, CSS oder JQuery Links pls habe, sende mir die richtigen. Ich bin ein bisschen neu in der Navbar-Sache, also brauche ich wirklich Hilfe. Vielen Dank! Hier ist mein Code:Bootstrap navbar wird nicht zusammenbrechen

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" 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> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <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-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" 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="./">Static top <span class="sr-only">(current)</span></a></li> 
     <li><a href="../navbar-fixed-top/">Fixed top</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 
+0

Meinst du, dass die Umschalttaste nicht funktioniert oder nicht in die mobile Version übergeht? – ZimSystem

Antwort

1

Ihr Code scheint mir richtig zu arbeiten. Das weist darauf hin, dass Ihnen einige JavaScript-Dateien fehlen. Um genau zu sein, fehlen Bootstrap und jQuery JS Dateien. Fügen Sie innerhalb Ihrer <body> einfach beide Dateien hinzu.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Beachten Sie jQuery erste, die sonst Bootstrap nicht funktionieren (Bootstrap einfach jQuery erfordert, das ist alles).

Here's Ihr Code, funktioniert. Ich habe Ihr Markup kopiert und Bootstrap + jQuery hinzugefügt.

EDIT

Ich habe Sie data-target die wront nicht bemerkt habe mit. Danke an @ Asifuzzaman Redoy. Ändern Sie einfach Ihre data-target auf die folgenden:

data-target=".navbar-collapse" 

ich meine Geige entsprechend aktualisiert haben.

+0

Danke. Das hat wirklich geholfen –

1

hey einfach ändern Sie Ihr data-target=".nav-collapse"-data-target=".navbar-collapse"

es wird funktionieren Sie nicht die richtige Klasse für Zusammenbruch

Check die unten Geige Targeting

Navbar Collapse Fiddle

und Sie müssen die CDN hinzufügen Referenz

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 
+0

Vielen Dank! Es funktionierte! –

1

Ändern Sie das Attribut toggle data-toggle in .navbar-collapse oder #navbar. So.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 

Sie zielen nicht über die Umschaltfläche auf die korrekte Klasse oder ID des Elements ab.

Verwandte Themen