jquery - Bootstrap 3 按钮组 : corner radius disappears after a button is hidden

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();

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

我猜 BS 说:.btn-group 的第一个 child 有 border-radius 而不是 .btn-group 的第一个 visible child 有 border-半径

有什么办法可以解决这个问题吗？

JSFIDDLE

请注意，我不想删除按钮，而是想隐藏它。

Answer 1

鉴于您已经在使用 jQuery，您可以使用以下代码向第一个/最后一个可见按钮元素添加一个类。

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

EXAMPLE HERE

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

.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(); -- (example)