bootstrap按钮式下拉菜单为什么右上角和右下角不是圆角

Question

问题

bootstap中想做按钮式下拉菜单，效果应该是四个角都是圆角，可是实现之后却只有左上角和左下角是圆角。

代码

<div class="btn-group">
                <button class="btn btn-default" data-toggle="dropdown">default
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else</a></li>
                </ul>
                </div>
                <div class="btn-group">
                <button class="btn btn-primary" data-toggle="dropdown">Primary
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else</a></li>
                </ul>
                </div>
                <div class="btn-group">
                <button class="btn btn-success" data-toggle="dropdown">Success
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">a</a></li>
                    <li><a href="#">b</a></li>
                    <li><a href="#">c</a></li>
                </ul>
</div>

错误效果

正确效果

Answer 1

给　.btn 加上 dropdown-toggle

<div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">default
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else</a></li>
    </ul>
 </div>