Question

我使用以下行在按钮组中创建了一个下拉按钮。

一切都按预期工作，唯一的问题是我的下拉按钮左侧显示圆角，因此看起来与按钮组中的其他按钮不同。

搜索Google将其作为 Bootstrap 2 中的一个已知问题，已在Bootstrap 3中修复，并在那里称为嵌套按钮组。

但是，有人可以告诉我一种使用CSS在Bootstrap 2中覆盖它的方法，为下拉按钮指定正确的样式吗？ 我只需要它来覆盖按钮组中的一个下拉按钮，并且只显示按钮组中显示的下拉按钮。

我的代码：

<div class="btn-group">
    <button type="button" class="btn changeView" id="viewR" title="change view">By Region</button>
    <button type="button" class="btn changeView" id="viewC" title="change view">By Country</button>
    <div class="btn-group">
        <a class="btn changeView dropdown-toggle" data-toggle="dropdown" href="#" id="viewS">
            More... 
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu pull-right">
            <li class="subRegion" id="af"><a href="#">Africa</a></li>
            <li class="subRegion" id="as"><a href="#">Asia</a></li>
            <li class="subRegion" id="eu"><a href="#">Europe</a></li>
            <li class="subRegion" id="na"><a href="#">North America</a></li>
            <li class="subRegion" id="oc"><a href="#">Oceania</a></li>
            <li class="subRegion" id="sa"><a href="#">South America</a></li>
        </ul>
    </div>
</div>

Answer 1

尝试将此添加到您的css：

.btn-group .btn-group .dropdown-toggle {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}

请参阅：http://www.bootply.com/ieogxJv04y

Answer 2

试试这个...

http://www.bootply.com/glCQBEpadk

只需删除<div class="btn-group">

即可

CSS：按钮组中按钮下拉列表的正确样式（Bootstrap 2）

2 个答案: