按钮组上的圆角因下拉菜单而丢失答案

【问题标题】：Rounded corners on button group lost with dropdown按钮组上的圆角因下拉菜单而丢失
【发布时间】：2014-11-15 02:51:48
【问题描述】：

我有一个下拉菜单的按钮组。但是，由于下拉菜单，右侧的圆角会丢失。如果我将下拉列表移出 btn 组，它将不起作用。如何保持圆角并在点击时显示下拉菜单？

<div class="btn-group">
    <button class="btn btn-success" id="shapeType">Province</button>
    <button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu" id="shapetypeDropdown">
        <li><a href="#" tabindex="-1">Province</a></li>
        <li><a href="#" tabindex="-1">Municipality</a></li>
        <li><a href="#" tabindex="-1">Ward</a></li>
    </ul>
</div>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

如果我理解正确，您需要添加类 .dropdown-toggle

<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
</button>

【讨论】：

【解决方案2】：

Bootstrap 会移除 btn-group 中元素右侧的圆角，最后一个元素除外。

处理下拉菜单时，ul 菜单是最后一个元素，而不是最后一个按钮。添加dropdown-toggle 类会覆盖删除右圆角的规则。

这是 CSS 的样子：

.btn-group>.btn:last-child:not(:first-child), 
.btn-group>.dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

【讨论】：