如何忽略引导按钮组中的隐藏元素？

Question

我有一个包含 10 个按钮的按钮组。在某些屏幕宽度（响应式）下，我使用媒体查询隐藏了其中一些按钮。

问题是，如果我隐藏最后一个按钮，新的最后一个按钮的边缘不会变圆。

这是一个很难描述的问题，但很容易在Fiddle 中显示。

我的问题：如何将圆角添加到按钮组中的最后一个 可见 按钮，而不是像当前那样简单地添加到最后一个按钮。

根据 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 解决方案？

Answer 1

如果您不介意添加依赖项，我推荐 AngularJS'ng-if。它派上用场when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes。它将从 DOM 中删除元素并允许您实现目标。

Answer 2

这是一个使用 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's Fiddle with solution

Answer 3

一种选择是简单地复制代码并将hidden-xs 类添加到第一个代码块和visible-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-right-element {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
  }