버튼 그룹의 둥근 모서리가 드롭 다운시 손실되었습니다

Question

드롭 다운 메뉴를위한 버튼 그룹이 있습니다. 그러나 드롭 다운으로 인해 오른쪽에있는 둥근 모서리가 손실됩니다. 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> 

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 클래스를 추가하면 오른쪽 라운드 모서리를 제거하는 규칙보다 우선합니다.

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

: 여기

는 CSS가 어떻게 생겼는지입니다