Bootstrap 3按钮组:隐藏按钮后,角半径消失

Question

我有以下Bootstrap 3按钮组:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

我隐藏第一个按钮使用:

$("button:eq(0)").hide();

结果是第一个可见按钮没有圆角半径:

我想BS说:.btn-group的第一个孩子有border-radius而不是.btn-group的第一个可见孩子有border-radius

有没有什么办法解决这一问题？

的jsfiddle

请注意,我不想删除按钮而是隐藏它.

Answer 1

鉴于您已经在使用jQuery,您可以使用以下内容将类添加到第一个/最后一个可见按钮元素.

$(".btn-group button:visible")
    .first()
    .addClass('radius-left')
    .end()
    .last()
    .addClass('radius-right');

这里的例子

然后,您需要添加以下样式:

.btn-group > .btn.btn-default.radius-left {
    border-top-left-radius: 4px!important;
    border-bottom-left-radius: 4px!important;
}
.btn-group > .btn.btn-default.radius-right {
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

不幸的是,!important有必要覆盖默认的Bootstrap样式.

作为替代方案,您可以完全删除第一个按钮元素,然后在必要时将其添加回来.$("button:eq(0)").remove();- (示例)