爲什麼bootstrap下拉菜單不能使用按鈕作爲選項工作？

Question

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

我想要下拉列表和帶按鈕標籤的選項。例如https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_js&stacked=h

我想用按鈕替換錨標籤，但它會顯示爲我不想要的按鈕形狀。我嘗試了https://v4-alpha.getbootstrap.com/components/dropdowns/中的代碼，但它沒有顯示爲它的樣子。任何方法來解決這個問題？謝謝。

Answer 1

這將爲你工作。

更新

我只是增加了一些額外的CSS自定義樣式來支持你的buttons，這是必要的，因爲作爲默認的風格是支持.dropdown-menu>li>a這意味着風格將只支持a標籤li下的.dropdown-menu，所以我做的是 - 我只是樣式按鈕到默認樣式。

我還增加<span class="caret"></span>到下拉按鈕，還添加了類btn-primary使用這個只有當其需要。希望這可以幫助你。

$(document).ready(function() { 
 
    $(".dropdown-toggle").dropdown(); 
 
});

.dropdown-menu>button.dropdown-item { 
 
    display: block; 
 
    padding: 3px 20px; 
 
    clear: both; 
 
    font-weight: 400; 
 
    line-height: 1.42857143; 
 
    color: #333; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    text-align: left; 
 
    background: #fff; 
 
    border: none; 
 
} 
 

 
.dropdown-menu>button.dropdown-item:focus, 
 
.dropdown-menu>button.dropdown-item:hover { 
 
    color: #262626; 
 
    text-decoration: none; 
 
    background-color: #f5f5f5; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    Dropdown <span class="caret"></span> 
 
</button> 
 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
 
    <button class="dropdown-item" type="button">Action</button> 
 
    <button class="dropdown-item" type="button">Another action</button> 
 
    <button class="dropdown-item" type="button">Something else here</button> 
 
    </div> 
 
</div>