Bootstrap 4 Dropdown funktioniert nicht

Question

Nicht sicher, ob es nur ich bin, ich bin von Bootstrap 3 nach v4 bewegen und Dropdown-Liste funktioniert nicht, auch das einfachste Beispiel aus dem Bootstrap v4 Dropdown-Sitzung kopiert. Der folgende Code zeigt eine Schaltfläche anklickbar, aber nicht herunterfallen. Ich habe herausgefunden, dass ich in den 0.01 Sekunden, nachdem ich aktualisiert habe und ich auf die Schaltfläche klicke, das Dropdown-Menü erscheint. Aber jederzeit nachdem es einfach nicht funktioniert. Hier ist mein Code

js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> 

css

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether-theme-arrows-dark.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 

HTML

<div class="btn-group"> 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Action 
    </button> 
    <div class="dropdown-menu"> 
    <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 class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Separated link</a> 
    </div> 
</div> 

Answer 1

Die btn-group Klasse wird nicht mehr für Dropdown-Listen in Bootstrap 4. Verwenden Sie verwendet die dropdown Klasse für die Eltern:

<div class="dropdown"> 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Action 
    </button> 
    <div class="dropdown-menu"> 
    <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 class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Separated link</a> 
    </div> 
</div> 

Answer 2

Erfahrene das gleiche Problem mit Alpha 4.0.6.

Ich habe die .dropdown-Stile fra bootstrap.css 3.3.7 in dropdowns.less kopiert und es hat funktioniert.

.dropup, 
.dropdown { 
    position: relative; 
} 

.dropdown-toggle::after { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-left: 0.3em; 
    vertical-align: middle; 
    content: ""; 
    border-top: 0.3em solid; 
    border-right: 0.3em solid transparent; 
    border-left: 0.3em solid transparent; 
} 

.dropdown-toggle:focus { 
    outline: 0; 
} 

.dropup .dropdown-toggle::after { 
    border-top: 0; 
    border-bottom: 0.3em solid; 
} 

.dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 10rem; 
    padding: 0.5rem 0; 
    margin: 0.125rem 0 0; 
    font-size: 1rem; 
    color: #292b2c; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
      background-clip: padding-box; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 0.25rem; 
} 

.dropdown-divider { 
    height: 1px; 
    margin: 0.5rem 0; 
    overflow: hidden; 
    background-color: #eceeef; 
} 

.dropdown-item { 
    display: block; 
    width: 100%; 
    padding: 3px 1.5rem; 
    clear: both; 
    font-weight: normal; 
    color: #292b2c; 
    text-align: inherit; 
    white-space: nowrap; 
    background: none; 
    border: 0; 
} 

.dropdown-item:focus, .dropdown-item:hover { 
    color: #1d1e1f; 
    text-decoration: none; 
    background-color: #f7f7f9; 
} 

.dropdown-item.active, .dropdown-item:active { 
    color: #fff; 
    text-decoration: none; 
    background-color: #0275d8; 
} 

.dropdown-item.disabled, .dropdown-item:disabled { 
    color: #636c72; 
    cursor: not-allowed; 
    background-color: transparent; 
} 

.show > .dropdown-menu { 
    display: block; 
} 

.show > a { 
    outline: 0; 
} 

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
} 

.dropdown-menu-left { 
    right: auto; 
    left: 0; 
} 

.dropdown-header { 
    display: block; 
    padding: 0.5rem 1.5rem; 
    margin-bottom: 0; 
    font-size: 0.875rem; 
    color: #636c72; 
    white-space: nowrap; 
} 

.dropdown-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 990; 
} 

.dropup .dropdown-menu { 
    top: auto; 
    bottom: 100%; 
    margin-bottom: 0.125rem; 
} 

Keine gültige workaorund aber es funktioniert :-)