Navbar funktioniert in bootstrap v3.0 aber nicht in v3.3.6

-1

Die navbar funktioniert nicht in der neueren Version von Bootstrap (v3.3.6), das Problem damit ist der Javascript Teil funktioniert nicht wie Umschalten auf mobile Ansicht und Dropdown und Ruhe.Navbar funktioniert in bootstrap v3.0 aber nicht in v3.3.6

Der Code funktioniert wunderbar, wenn ich es durch Bootstrap V3.0 ersetzen, funktioniert aber nicht, wenn mit 3.3.6 (CDN und offline) verwendet. Ich habe Kreuz auf Rechtschreib- und Verzeichnisfehler überprüft.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Guru Prasad - Freelance</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 
    <link rel="stylesheet" type="text/css" href="includes/css/style.css"> 
    <script src="includes/js/modernizr-2.6.2.min.js"></script> 
</head> 
<body> 

<div class="navbar fixed-top"> 
<div class="container"> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand">Guru Prasad</a> 
    </div> <!-- Navbar-Header --> 

    <div class="navbar-collapse collapse"> 
     <ul class="navbar nav"> 
      <li class="active">Portfolio</li> 
      <li>About</li> 
      <li>Contact</li> 
     </ul> <!-- End Navbar-nav --> 
    </div> <!-- End Navbar-collapse --> 

</div> <!-- End Container --> 
</div> <!-- End Navbar --> 

<!-- //Javascript --> 
<script type="text/javascript" src="includes/js/jquery-2.2.4.min.js"></script> 
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="includes/js/script.js"></script> 
</body> 
</html>

Quelle

2016-06-02 am guru prasath

Was bedeutet _Hat nicht work_ eigentlich? Sie müssen Details zu dem Problem angeben, das Sie haben. – vanburen

@vanburen navbar –

Sie haben immer noch nicht erklärt, was mit der ** navbar ** nicht funktioniert, basierend auf dem, was Sie zur Verfügung gestellt haben, funktionieren sie in v3.0 und v3.3.6. Überprüfen Sie die Dokumentation, da Ihnen einige Elemente fehlen, die in jeder Version von v3 Probleme verursachen -> [Navbar] (https://getbootstrap.com/components/#navbar). – vanburen

Basierend auf dem Code, den Sie zur Verfügung gestellt (wenn Sie etwas außerhalb des Standard tun, müssen Sie feststellen, dass) ich nicht sehen kann, wie entweder tatsächlich funktionieren könnte.

Du Befestigung nicht das Datenziel (data-target="#mobile-collapse") Attribut zu der navbar-Zusammenbruch div (<div class="navbar-collapse collapse" id="mobile-collapse">).

Das gleiche HTML gilt für die folgenden Beispiele mit v3.0 und v3.3.6. Siehe Navbar Docs.

Arbeiten 3.0 Beispiel

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand">Guru Prasad</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse" id="mobile-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="">Portfolio</a> 
 
     </li> 
 
     <li><a href="">About</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>

Arbeiten 3.3.6 Beispiel

<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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand">Guru Prasad</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse" id="mobile-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="">Portfolio</a> 
 
     </li> 
 
     <li><a href="">About</a> 
 
     </li> 
 
     <li><a href="">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>

Quelle

2016-06-02 15:41:06 vanburen

Navbar funktioniert in bootstrap v3.0 aber nicht in v3.3.6

Antwort

Verwandte Themen