我有以下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
请注意,我不想删除按钮,但要隐藏它.
解决方法
鉴于您已经使用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;
}
不幸的是,重要的是覆盖默认的Bootstrap样式.
或者,您可以完全删除第一个按钮元素,然后在必要时将其添加回来.$(“button：eq(0)”).remove(); – (example)