Bootstrap 3按钮组：当一个按钮被隐藏后，角半径消失。

Question

Bootstrap 3按钮组：当一个按钮被隐藏后，角半径消失。

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

13

我有以下的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 请注意，我不想删除按钮，只是隐藏它。

- Ionică Bizău

完全删除该元素？我不确定那是否可行，但像你的可见性理论一样，那可能是一个选项。 - Gerben Jacobs

@GerbenJacobs 我只想隐藏这个按钮。 - Ionică Bizău

1

是的，但那样行不通。如果你移除并添加按钮，它就能工作了。 - Gerben Jacobs

你还在寻找更好的解决方案吗？我认为我可以想出一个涉及（n）个按钮的解决方案。让我知道！ - ambe5960

@ambe5960 当然可以！请发出来。 - Ionică Bizău

3个回答

1

AngularJS解决方案

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

但是如果您正在使用AngularJS，则有一个更简单的解决方案：

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

- theDmi

0

一个纯CSS的解决方法是使用:before和:after伪选择器将曲线端点放在btn-group本身上，这样我们就不会在整个元素周围得到边框。显然，这不会直接应用于您的按钮的角半径（如所请求的那样），但当您的按钮不是所有不同颜色时，它看起来很好。

注意：您始终需要在开头和结尾隐藏按钮（以使边缘变正方形），或者更合理的做法是从btn-group CSS中删除半径。

这里有一个演示, 或者查看下面的代码片段。

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

- mmarlow

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

考虑到您已经在使用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(); -- （示例）