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说：<。bbn-group的第一个孩子有border-radius 而不是 .btn-group的第一个可见孩子有边框 - 半径

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

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中删除。这使得“new”第一个按钮具有圆角，因为Bootstrap现在使用的:first-child选择器会选择那个。

Answer 3

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

注意：您将始终在开始和结束时要求隐藏按钮（使边缘成方形），或者更合理地从btn-group CSS中删除半径。

Here's a fiddle，或查看下面的代码段。

.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>