如何忽略引导按钮组中的隐藏元素？
我有一个包含10个按钮的按钮组。 在某些屏幕宽度下（响应）我用媒体查询隐藏了其中一些按钮。
问题是，如果我隐藏最后一个按钮，新的最后一个按钮的边缘不会变圆。
这是一个难以描述的问题，但很容易在小提琴中演出。
我的问题：如何将圆角添加到按钮组中的最后一个可见按钮，而不是像当前那样只是最后一个按钮。
按照SO的规则，来自Fiddle的代码如下：
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default" style="display:none;">Sixth</button>
</div>
请注意第二个按钮组中'第五'缺少圆角。
我可以通过向最后一个可见元素添加一个新类来使用JavaScript，但我宁愿不要。 有没有更纯净的纯CSS解决方案？
如果您不介意添加依赖项，我建议您使用AngularJS的ng-if 。 当使用依赖于DOM中元素位置的css选择器时，它会派上用场，例如：first-child或last-child伪类。 它会从DOM中删除元素，并允许您实现目标。
一种选择是简单地复制代码并将第一个代码块和visible-xs的hidden-xs类添加到另一个代码块。
喜欢这个：
<div class="btn-group hidden-xs" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group visible-xs" id="sortBtns2" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
另一个选择是将css规则应用于edgy元素：
.edgy-right-element {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
以下是使用jQuery的解决方案：
$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0);
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({
'border-top-left-radius': '3px',
'border-bottom-left-radius': '3px',
});
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
对于每个带有隐藏按钮的按钮组，这将删除其中所有按钮的边框半径，然后为第一个和最后一个可见按钮添加边框半径。
OP的小提琴解决方案
链接地址: http://www.djcxy.com/p/24485.html上一篇: How to ignore hidden elements in a Bootstrap Button Group?