2016-06-29 37 views
3

Wenn ich die mobile Version meiner Jumbotron-basierten Seite versuche, schaltet die Navigationsleiste nicht um. Ich möchte es wie in the example ausklappen, aber es tut es nicht. Vielleicht fehlt mir ein Code, kannst du mir helfen, es funktionieren zu lassen? Dieser Screenshot zeigt, wie er aussehen soll, wenn die Navigationsleiste in [dem Beispiel ausklappt.bootstrap navbar schaltet nicht um

enter image description here

Dies ist my page, die auf jumbotron beruht, sondern die navbar ausklappbare funktioniert nicht, wenn ich auf die Schaltfläche rechts oben drücken, sie wechseln nicht.

enter image description here

Mein Code (identisch mit dem Beispiel).

<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> 
      </button> 
      <a class="navbar-brand" href="/">Customer Service</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-right" action="/account/do_login" method="post"> 
       <div class="form-group"> 
        <input type="text" name="email" placeholder="Email" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <input type="password" name="password" placeholder="Password" class="form-control"> 
       </div> 
       <button type="submit" class="btn btn-success">Sign in</button> 
      </form> 
     </div> 
     <!--/.navbar-collapse --> 
    </div> 
</nav> 
+1

Überprüfen Sie Ihre Browser-Konsole und sehen Sie, gibt es einen Fehler? –

+0

@DivyeshSavaliya Es gibt leider keine Fehlermeldung. –

+1

check after toggle click –

Antwort

3

Bitte versuchen Sie Ihre bootstrap.min.js oder bootstrap.js zu überprüfen. kann sein, dass sie nicht richtig geladen werden.

+0

Vielen Dank für die Antwort. Jetzt funktioniert es. –

+1

Sie sind willkommen. –

0

Können Sie uns den Teil zeigen, wo Sie Bootstap und Jquery importieren?

Ich glaube, der Fehler ist da. Weil für mich das Beispiel funktioniert. Ich hatte das gleiche Verhalten, bevor ich meine Importe in Ordnung brachte.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Dies sollte im <head> in dieser Reihenfolge ein reibungsloses Funktionieren des Bootstrap zu schaffen platziert werden.