Bootstrap Navigationsleiste Mobile Erweitern Schaltfläche funktioniert nicht

So arbeite ich mit dieser Bootstrap-Navigationsleiste. Wenn die Größe der Breite geändert wird, wird das Fenster unterhalb von ungefähr 767px oder so verwendet, nimmt alle Navigationsleisten-Links auf und zeigt stattdessen eine Erweitern-Schaltfläche an. Grundsätzlich für mobile Benutzer. Das ist das richtige Verhalten und was ich erwarte.Bootstrap Navigationsleiste Mobile Erweitern Schaltfläche funktioniert nicht

Aber wenn Sie auf diese neue mobile Erweiterung Schaltfläche klicken passiert nichts. Ich möchte, dass es erweitert wird und ein Menü mit allen Links anzeigt, die in der Navigationsleiste entfernt wurden. Zum Beispiel this page. Wenn Sie die Breite des Fensters verkleinern, wird diese Schaltfläche erstellt und es kann geklickt werden. Das versuche ich zu erreichen.

Ich habe eine codepen here erstellt. Ich habe unten auch ein kleines Codefragment aufgelistet. Aber die codepen gibt ein besseres interaktives Beispiel von dem, was vor sich geht. Irgendwelche Ideen, was ich falsch mache und warum diese Erweiterung nicht klickbar ist?

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" aria-expanded="false"> 
     <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="#">My App</a> 
</div>

Quelle

2016-07-17 Charlie Fish

Möglicherweise müssen Sie auch die jQuery-Bibliothek laden. Die Antwort unter folgendem Link kann helfen. http://stackoverflow.com/questions/38189481/bootstrap-hamburger-menu-not-working/38189610#38189610 – GoMega54

@ GoMega54 Das hat funktioniert, aber die Reihenfolge der Links sind falsch in dieser Antwort scheint wie. Auch erforderlich, um auf den Container des Navigationsmenüs zu zeigen, wie Dejan Lacmanovic sagte. Fühlen Sie sich frei, eine Antwort zu senden, und ich werde es upvote :) –

data-target="#navigationbar"

sollten Sie mit Ihrem Navigationsmenü Behälter zeigen.

Also, in Ihrem Fall, sollte es sein:

data-target="#bs-example-navbar-collapse-1"

Quelle

2016-07-17 19:23:28

Das funktionierte aber auch benötigt, um die jQuery-Bibliothek und bootstrap js wie GoMega54 sagte hinzugefügt. Danke für Ihre Hilfe! –

Sie die jQuery-Bibliothek und Bootstrap JS-Bibliothek für das Drop-Down-Menü laden müssen auf mobilen Bildschirmen zu arbeiten.

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

Quelle

2016-07-17 19:45:02 GoMega54

Bootstrap Navigationsleiste Mobile Erweitern Schaltfläche funktioniert nicht

Antwort

Verwandte Themen