2016-06-22 15 views
1

Bitte arbeitet unter Code überprüfen, was Fehler ist:Chrome und Firefox Bootstrap nav wechselt nicht

Ich habe versucht, das gleiche auf w3schools Demo-Seite zu laufen und es funktioniert gut. aber es funktioniert nicht nur auf meinem Chrome und Firefox.

Fehle ich hier etwas? Können Sie mir auch sagen, wie können wir solche Probleme debuggen?

<body> 

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <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="#">Ristorante Con Fusion</a> 
      </div> 
      <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Menu</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
     </div> 
    </nav> 
</body></html> 

Antwort

2

Es gibt keinen Fehler mit Ihrem Code. Aber ich denke, Sie haben Fehler beim Aufrufen der erforderlichen Quelldateien für den Bootstrap.

Dateien innerhalb <head> Tag benötigt:

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

Dateien benötigt, bevor </body> Tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Ihre HTML-Code sollte wie folgt aussehen.

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

 
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
 
     <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="#">Ristorante Con Fusion</a> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Menu</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
    </nav>

+0

Ich glaube, Sie haben Recht. –

+0

@TejaswiSharma, ja, ich habe gerade den obigen Code überprüft und ausgeführt. – claudios

+0

@TejaswiSharma: Der gleiche Code funktioniert auf Online-Tool für mich, aber nicht auf meinem Google Chrome und Firefox, möchte ich nur wissen, ist es spezifisch für mein System oder nur für alle – Siddharth