Bootstrap 3按钮组：在隐藏按钮后，角落半径消失 [英] Bootstrap 3 button group: corner radius disappears after a button is hidden

问题描述

我有以下Bootstrap 3按钮组：

 < div class =btn-group> 
< button type =buttonclass =btn btn-default>向左< /按钮> 
< button type =buttonclass =btn btn-default>中间< /按钮> 
< button type =buttonclass =btn btn-default> Right< / button> 
< / div> 
  

我隐藏第一个按钮：

<$ 。p $ p> $（ 按钮：当量（0））隐藏（）;


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

我猜BS说： .btn-group的第一个孩子有边界半径而不是第一个可见 .btn-group的孩子有边界半径

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

JSFIDDLE

请注意，我不想删除按钮，但要隐藏它。

解决方案

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

  $（。btn ）
 .first（）
 .addClass（'radius-left'）
 .end（）
 .last（）
 .addClass （半径右）; 
  

$然后您需要添加以下样式： b

  .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-right-right-radius：4px！important; 
 border-bottom-right-radius：4px！important; 
} 
  

不幸的是，！important 是必要的，以覆盖默认的引导样式。

---

另外，您可以完全移除第一个按钮元素，然后在需要时将其添加回来。 $（button：eq（0））。remove（）; - （示例）

I have the following Bootstrap 3 button group:

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

I hide the first button using:

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

The result is that the first visible button doesn't have corner radius:

I guess the BS says: first child of .btn-group has border-radius instead of first visible child of .btn-group has border-radius

Is there any way to fix this?

JSFIDDLE

Note that I don't want to remove the button but to hide it.

解决方案

Given that you are already using jQuery, you could use the following to add a class to the first/last visible button elements.

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

EXAMPLE HERE

You would then need to add the following styling:

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

Unfortunately, !important is necessary to overwrite the default Bootstrap styling.

---

As an alternative, you could remove the first button element completely and then add it back in when necessary.. $("button:eq(0)").remove(); -- (example)

这篇关于Bootstrap 3按钮组：在隐藏按钮后，角落半径消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！