Ich habe Probleme, meine Dropdowns zum Laufen zu bringen. Ich kann die Navigationsleiste perfekt anzeigen lassen, aber wenn ich auf "Dropdown" (eines von beiden) klicke, wird das Dropdown-Menü nicht angezeigt. Ich habe versucht, in anderen Beiträgen nachzuschauen, aber nichts, was die Probleme eines jeden behoben hat, hat geholfen. Ich habe die Quelle direkt von der Bootstrap-Website kopiert, aber ich scheine es nicht zu schaffen, dass sie auf meinem Computer funktioniert. Hat jemand Ideen? Ich habe es seit einer Stunde angestarrt und scheint nicht herauszufinden, was das Problem ist.
<head>
<script src="resource/js/jquery-1.11.0.js"></script>
<script src="resources/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('dropdown-toggle').dropdown()
});
</script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Vielleicht versuchen Sie es mit
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
und sehen, ob es funktionieren wird.
Ich hatte ein Bootstrap + Rails-Projekt, und das Dropdown-Verfahren funktionierte einwandfrei ..
Dies ist die Lösung, die das Problem behoben hat. Fügen Sie der .js-Datei Folgendes hinzu:
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
100% Arbeitslösung
setzen Sie einfach Ihren Jquery-Link vor allen Js- und CSS-Links
Beispiel richtig
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
Beispiel falsch!
<script type="text/javascript" src='js/bootstrap.min.js'></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="jquery/jquery.js"></script>
Setzen Sie den jquery-js-Link vor dem bootstrap-js-Link wie folgt:
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
anstatt:
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
Ich habe dies während der Verwendung von ASP .NET Forms festgestellt. Die von mir verwendete Lösung bestand darin, jQuery- und Bootstrap-Referenzen aus dem <asp:ScriptManager runat="server">
auf der Masterseite zu löschen oder zu kommentieren. Es scheint, dass ein Konflikt mit den jQuery- und Bootstrap-Referenzen entsteht, die Sie in den <header>
einfügen.
Vielleicht kann jemand da draußen davon profitieren:
Bootstrap-Dropdowns wurden aufgrund eines Upgrades von Django-bootstrap3
-Version 6.2.2
auf 11.0.0
nicht mehr heruntergefahren.
Wir hatten ein ähnliches Problem in einer älteren Django
-Site, die stark von bootstrap
bis Django-bootstrap3
abhängig ist. Die Site hat immer gut funktioniert und hat dies auch in der Produktion getan, aber nicht mit unserem lokalen Testsystem. Es gab keine offensichtlichen verwandten Änderungen im Code, daher war ein Abhängigkeitsproblem höchst wahrscheinlich.
Beim Besuch der Website auf dem local Django-Testserver sah es perfekt aus. Auf den ersten Blick: Stil/Layout mit bootstrap
wie erwartet, einschließlich der Navigationsleiste. Es konnten jedoch nicht alle Dropdown-Menüs angezeigt werden.
Keine Fehler in der Browserkonsole. Alle statischen js
- und css
-Dateien wurden erfolgreich geladen, und die Funktionalität aus anderen Paketen, die auf jquery
angewiesen waren, funktionierte wie erwartet.
Es stellte sich heraus, dass das Django-bootstrap3
-Paket in unserer lokalen Python-Umgebung auf die neueste Version 11.0.0
aktualisiert wurde, während die Website mit 6.2.2
erstellt wurde.
Das Zurücksetzen auf Django-bootstrap3==6.2.2
hat das Problem für uns gelöst, obwohl ich keine Ahnung habe, was genau es verursacht hat.
Falls noch immer dasselbe Problem auftritt, überprüfen Sie in Ihrem Browser Ihre view Page source , ob alle Jquery- und Bootstrap-Dateien geladen sind und die Pfade zur Datei korrekt sind. Am wichtigsten! Stellen Sie sicher, dass Sie die neueste stabile Jquery-Datei verwenden.
Ich denke, es ist die Frage der Route Ihrer Routendatei. Nicht der Bootstrap oder die JQuery-Datei.
Ich verwende Rails 4.0 und stieß auf das gleiche Problem
Hier ist meine Lösung, die den Test bestanden hat
zu Gemfile hinzufügen
gem 'bootstrap-sass'
lauf
bundle install
fügen Sie dann app/assets/javascripts/application.js hinzu
//= require bootstrap
Dann sollte das Dropdown funktionieren
Chris 'Lösung funktioniert übrigens auch für mich.
Aber ich denke, es ist weniger konform mit der Idee der Asset-Pipeline
Laut getBootstrap.com basieren Dropdown-Listen auf der Drittanbieter-Bibliothek Popper.js. Wenn also das Dropdown-Menü nicht beim Klicken funktioniert, sondern nur für den Hover des Dropdowns, dann sind dies Popper.js, Bootstrap.js und Bootstrap.css. Wenn Popper.js vor dem Einschließen von Bootstrap-Bundles nicht eingeschlossen wurde, könnte dies einer der Gründe sein.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"></link>
Es scheint mehr zu tun für Rails 4.
In deinem Gemfile hinzufügen.
gem 'bootstrap-sass', '~> 3.2.0.2'
Als nächstes musst du laufen
$ bundle install
Dies ist der Teil, den niemand erwähnt hat
Öffnen Sie die Datei config/application.rb
fügen Sie dies direkt vor dem vorletzten Ende hinzu
config.assets.precompile + =% w (* .png * .jpg * .jpeg * .gif)
wie hier zu sehen ungefähr 20% weiter unten.
Als nächstes erstellen Sie eine custom.css.scss-Datei in diesem Verzeichnis
app/Assets/Stylesheets
wie hier zu sehen etwas weiter von der obigen Aufgabe entfernt
In dieser Datei enthalten
@import "bootstrap";
Stoppen Sie jetzt Ihren Server und starten Sie neu und alles sollte gut funktionieren.
Ich habe versucht, Bootstrap ohne Edelstein auszuführen, aber es funktionierte nicht für mich.
Hoffe das hilft jemandem raus!
Meine Bootstrap-Version zeigte auf bootstap4-alpha.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
in 4-Beta geändert
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
und es fing an zu arbeiten
Ich habe alle obigen Antworten ausprobiert und die einzige Version, die für mich arbeitet, ist die jquery 1.11.1 . Ich habe es mit allen anderen Versionen 1.3.2, 1.4.4, 1.8.2, 3.3 versucht .1 und navbar dropdown funktioniert nicht.
<script src="jquery/jquery-1.11.1.min.js"></script>
das Problem ist, dass href href = "#" ist. Sie müssen href = "#" in allen Tags entfernen
In meinem Fall wurde das Problem dadurch behoben, dass Chrome Extensions deaktiviert wurde. Ich habe sie einzeln aus Chrome entfernt, bis ich den Täter gefunden habe.
Da ich der Autor der anstößigen Chrome-Erweiterung bin, denke ich, sollte ich die Erweiterung besser reparieren!
Für Bootstrap 4 benötigen Sie eine zusätzliche Bibliothek. Wenn Sie Ihre Browserkonsole lesen, gibt Bootstrap tatsächlich eine Fehlermeldung aus, die Sie darüber informiert, dass Sie sie benötigen, damit Dropdown ausgeführt werden kann.
Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
in eckigen Projekten fügen wir die Zeilen angle-cli.json oder angle.json hinzu:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],