Question

我正试图反转split button dropdown。但是在渲染时会出现圆角的一些问题（分组不像我期望的那样工作）。

<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)在引导样式中用于该行为。

Answer 1

简单地说，创建一个CSS选择器，在应用Bootstrap的CSS之后将被称为，并简单地指定边界半径覆盖：

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

将其添加到您的按钮：

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

请参阅demo。似的。

Answer 2

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

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

Answer 3

由于没有人在bootstrap中提供替代解决方法，这里是我上面更新的解决方案：

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

在主按钮之前带有插入符号的Bootstrap分割按钮下拉列表

3 个答案: