Question

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

<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>

Answer 1

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

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

Answer 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;
}

按钮组上的圆角失去了下拉列表

2 个答案: