按鈕組上的圓角落下丟失

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