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 的第一个孩子有边界半径，而不是 .btn-group 的第一个 visible 孩子有边界-半径

有没有办法解决这个问题？

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)

Answer 2

AngularJS 解决方案

对于纯 jQuery 项目，Josh Croziers 的回答是正确的。

但如果你碰巧在使用 AngularJS，有一个更简单的解决方案：

将ng-if="expression" 添加到按钮。当expression 为真时，按钮将被显示，否则它将完全从 DOM 中移除。这使得“新”的第一个按钮具有圆角，因为 Bootstrap 使用的 :first-child 选择器现在选择了那个。

Answer 3

纯 CSS 解决方法可能是一个可接受的解决方案，即使用 :before 和 :after 伪选择器将弯曲的末端放在 btn-group 本身上，这样我们就不会得到边框围绕整个事情。显然，这不会将圆角半径直接应用于您的按钮（按要求），但当您的按钮并非全是不同的颜色时，它看起来会很好。

注意：您要么总是需要在开始和结束处隐藏按钮（以使边缘平整），或者更合理地从 btn-group CSS 中删除半径。

Here's a fiddle，或者查看下面的sn-p。

.btn-group{
  margin:20px; /* just for the demo */
}

.btn-group:before,.btn-group:after{
  display:block;
  float:left;
  content:".";
  color:transparent;
  /* WARNING: 
  Matching the bootstrap rules here, this can change when size rules (sm,xs) are applied to buttons 
  */
  padding: 6px 3px;
  font-size: 14px;
  border:1px solid #ccc;
}

.btn-group:before{
  border-radius: 4px 0 0 4px;
  border-right:none;
}

.btn-group:after{
  border-radius: 0 4px 4px 0;
  border-left:none;
}

/* WARNING: hard-coding bootstrap colour values, for demo-purposes, not recommended */
.btn-group.primary:before,.btn-group.primary:after{
  background-color:#337ab7;
  border-color:#2e6da4;
}

/* WARNING: hard-coding bootstrap colour values, for demo-purposes, not recommended */
.btn-group.info:before,.btn-group.info:after{
  background-color:#5bc0de;
  border-color:#46b8da;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group">
  <a href="#" class="btn btn-default hidden">One</a>
  <a href="#" class="btn btn-default">Two</a>
  <a href="#" class="btn btn-default">Three</a>
  <a href="#" class="btn btn-default">Four</a>
  <a href="#" class="btn btn-default hidden">Five</a>
</div>


<div class="btn-group">
  <a href="#" class="btn btn-default hidden">One</a>
  <a href="#" class="btn btn-success">Two</a>
  <a href="#" class="btn btn-danger">Three</a>
  <a href="#" class="btn btn-warning">Four</a>
  <a href="#" class="btn btn-default hidden">Five</a>
</div>

<div class="btn-group primary">
  <a href="#" class="btn btn-primary hidden">One</a>
  <a href="#" class="btn btn-primary">Two</a>
  <a href="#" class="btn btn-primary">Three</a>
  <a href="#" class="btn btn-primary">Four</a>
  <a href="#" class="btn btn-primary hidden">Five</a>
</div>

<div class="btn-group info">
  <a href="#" class="btn btn-info hidden">One</a>
  <a href="#" class="btn btn-info">Two</a>
  <a href="#" class="btn btn-info">Three</a>
  <a href="#" class="btn btn-info">Four</a>
  <a href="#" class="btn btn-info hidden">Five</a>
</div>