Bootstrap v4 Dropdown-Menü funktioniert nicht

Question

IDK warum, aber ich benutze Bootstrap v4 und das Dropdown-Menü, buchstäblich kopieren und Einfügen von der Dokumentation, funktioniert nicht. Ich habe auch andere Leute Beispiele auf leeren Seiten versucht. Nichts.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 

 
<div class="col-12"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
          Dropdown button 
 
         </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Action</a> 
 
     <a class="dropdown-item" href="#">Another action</a> 
 
     <a class="dropdown-item" href="#">Something else here</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie tatsächlich heruntergeladen haben Angenommen und referenziert die Dateien korrekt, über Ihr Code wie erwartet. Beachten Sie, dass Sie Ihre Dateien relativ referenziert haben, also müssen sie in einem scripts Ordner auf der gleichen Ebene wie die Datei sein, die Sie versuchen, Bootstrap on auszuführen.

Die einzigen erforderlichen Dateien sind jQuery, Tether und Bootstrap.js. popper.js ist nicht erforderlich. Zusätzlich zu den drei erforderlichen JavaScript-Dateien benötigen Sie wahrscheinlich auch die CSS-Datei von Boostrap.

Die JavaScript-Dateien sollten in der folgenden Reihenfolge referenziert werden: JavaScript

1. jQuery
2. Tether
3. Bootstrap der Komponente

Es spielt keine Rolle, wenn Sie Bootstrap CSS laden.

Dies kann im folgenden Beispiel zu sehen arbeiten:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="col-12"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Dropdown button 
 
    </button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> 
 
     <a class="dropdown-item" href="#">Action</a> 
 
     <a class="dropdown-item" href="#">Another action</a> 
 
     <a class="dropdown-item" href="#">Something else here</a> 
 
    </div> 
 
    </div> 
 
</div>

Fühlen Sie sich frei von dieser Vorlage zu erstellen.

Hoffe, das hilft! :)