twitter-bootstrap-3 - 可以在 Bootstrap 下拉菜单中使用按钮而不是 anchor 吗

Question

Bootstrap 中的典型下拉列表标记为

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
  </ul>
</div>

下拉列表中的项目是 anchor 标记。

虽然有时下拉项需要充当按钮，因为它不会离开但会执行页面上的某些功能。

是否有任何默认支持在不破坏其呈现方式的情况下执行以下操作？我应该使用不同的类(class)吗？还是我应该复制应用于 .dropdown-menu > li > a 的样式并将其应用于 .dropdown-menu > li > button 样式？

  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><button class="btn btn-default">Another action</button></li>
  </ul>

虽然我知道我可以修改 anchor 标记以执行 preventDefault()，但它似乎是错误的标记，并且还会导致浏览器显示 Url，就好像它正在导航一样。按钮不会像这样。

Answer 1

因此，虽然我没有找到让按钮在下拉列表中正确设置样式的内置方法，但明确设置样式以匹配它。将以下内容添加到我的 css 文件中。

.dropdown-menu {

    > li > button {
        display: block;
        border: 0;
        border-radius: 0;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }

}

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