Navbar collapse nicht die Erweiterung mit dropdown nach Klick auf es
So, ich habe gerade angefangen mit Bootstrap 3 und ich will mein header werden an der Oberseite befestigt, die Inhalte in der es vertikal ausgerichtet mit dem Inhalt in den Körper, und schließlich reagieren.
Alles funktioniert einwandfrei außer das klicken auf zusammenbrach navbar scheint nicht zu funktionieren. Klick auf die kleine Symbol mit drei bars, einer über dem anderen nicht zeigen Sie mir meine Liste unten.
Ich weiß, dies könnte eine ganz einfache Fehler, aber ein Klick auf diese Kinder hier, funktioniert nicht:
Ich glaube, ich könnte etwas falsch mit Klassen in meinem Kopf.
Dies ist mein code:
<header class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="#">Logo Text</a>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="#" > My Account </a> </li><br>
<li> <a href="#"> Logout </a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
Das einzige, was ich in meinem custom css ist:
@media (min-width: 980px){
body{
padding-top: 70px;
}
}
aber ich glaube nicht, dass wäre dieses problem verursachen.
Die Dinge, die ich habe, bevor mein header in mein html sind:
<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">
die sind alle in meinem lokalen Verzeichnis.
Suche nach "collapse funktioniert nicht"/"collapse klicken funktioniert nicht" zeigt mir paar Ergebnisse, die zu sein scheinen im Zusammenhang mit dem problem des symbols selbst nicht angezeigt.
Einschließlich collapse.js das kam mit der bootstrap hat nicht dieses problem zu beheben entweder.
- Ihre Schaltfläche definiert
data-target=".navbar-ex1-collapse"
aber Sie müssen nicht fügen Sie diese Klasse, um Ihre nav. Verwenden<nav class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
und der code wird funktionieren - Wow... vielen Dank! Um ehrlich zu sein, ich habe mit bootstrap, ohne zu wissen, was diese Daten-schaltet und Sachen wie, dass tatsächlich tun. Bitte fügen Sie Ihren Kommentar als eine Antwort, ich werde es akzeptieren. 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Zuklappen der Navigationsleiste verwendet den Zusammenbruch plugin finden Sie unter: http://getbootstrap.com/javascript/#collapse. So füge data-toggle="collapse" und ein data-target, um Ihr navbar-Schaltfläche. Und fügen Sie die gleiche Klasse wie für das Daten-Ziel den nav-element in deiner navbar:
und:
Mehr über Migration von Bootstrap Bootstrap v3 v4 hier in docs.
data-target="navbar-collapse"
solltedata-target=".navbar-collapse"
.class="navbar-toggle"
sollteclass="navbar-toggler"
.Für andere, die sich hier aus einer web-Suche:
Ich hatte das gleiche problem - nicht in der Lage, zu erweitern, eine navbar - aber alle meine code war in Ordnung. Wenn Sie überprüft haben Ihre
data-toggle
pro @Bass-Jobsen's Antwort, und noch immer Probleme auftreten, dann überprüfen Sie Ihre CDN.Mein problem war, dass ich hatte eine die Netzwerk-level-ad-blocker das war die Blockierung einige meiner CDN ' ed Skripte.
Facepalm.