0

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

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

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

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

我的代码：

<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>
4

2 回答 2

1

尝试将此添加到您的CSS：

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

见： http: //www.bootply.com/ieogxJv04y

于 2014-06-24T02:39:48.977 回答
1

试试这个...

http://www.bootply.com/glCQBEpadk

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

于 2014-06-24T03:02:19.523 回答