为什么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>