按钮组上的圆角落下丢失

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

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

Answer 2

引导删除除最后一个元素的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; 
}