0

我正在尝试制作反向拆分按钮下拉菜单。但是在渲染圆角时会出现一些问题（分组不像我期望的那样工作）。

<div class="btn-group padded">
    <!-- Dropdown -->
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">  
        <span class="caret"></span>
    </button>   
    <ul class="dropdown-menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 0</a></li>
    </ul>
    <!-- /Dropdown -->
    <button class="btn btn-info" type="button">Option 2</button>
</div>

可以在下面的Demo中看到。任何修复的想法？

UPD：现在我使用以下 css hack：

.btn-group>.btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

但我不确定为什么.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle)在引导样式中用于该行为。

4

3 回答 3

2

简单地说，创建一个 CSS 选择器，在应用 Bootstrap 的 CSS后调用它，并简单地指定边框半径覆盖：

.btn.dropdown-toggle.beforetoggle {
    border-radius: 4px 0 0 4px;
}

将其添加到您的按钮：

<button class="btn dropdown-toggle beforetoggle"/>

请参阅演示。快速。

于 2013-11-20T03:26:36.003 回答
1

圆角来自border-radius: 4px;.btn 类的 bootstrap.css 中的样式。

您可以为特定按钮覆盖它（我会在页面上的按钮中添加一个 CSS 类并将覆盖添加到该 CSS 类）。

于 2013-11-14T21:14:15.710 回答
-3

由于没有人在引导程序中提供替代解决方法，因此这是我上面更新的解决方案：

.btn-group>.btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
于 2013-11-20T07:43:41.547 回答