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

Question

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

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

这是一个难以描述的问题，但在Fiddle中非常容易展示。

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

以下是来自Fiddle的代码，根据SO的规定：

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

请注意第二个按钮组中“fifth”缺少圆角。

我可以使用JavaScript向最后一个可见元素添加新类来完成此操作，但我不想这样做。是否有更干净的仅使用CSS的解决方案？

- Mike

---

可能是Hide button in btn-group twitter-bootstrap的重复问题。 - Martin Liversage

@MartinLiversage 我正在寻找 CSS 解决方案，而不是 JS。 - Mike

你的问题与我提供的链接所指向的问题唯一的不同之处在于，你想要一个仅使用CSS的解决方案，而另一个问题只是要求一个解决方案，通过查看提供的答案，似乎不可能有一个仅使用CSS的解决方案。我相信其他遇到类似问题的人可以通过查看这两个问题的答案受益。对我来说，最好的解决方案是链接问题中评分最高的答案。 - Martin Liversage

@MartinLiversage，如果一个人正在寻找任何解决方案，而另一个人正在寻找仅使用CSS的解决方案，则两者都是可行的，特别是当最高投票答案不是仅使用CSS时。是否可能并不重要，在这种情况下，最佳答案会说它不可能，并解释为什么不可能。 - Mike

另一个问题是它会改变最后一项之前的填充，导致如果你尝试居中按钮，它们将偏离中心。也许另一个解决方案是在按钮上有另一个隐藏的div，并在使其可见时将其移动到btn-group中，当不可见时将其移出。因为似乎btn-group / btn-toolbar并不适合有隐藏的项目。 - Raj

Answer 1

如果您不介意添加依赖项，我推荐使用AngularJS的ng-if。当使用依赖于元素在DOM中位置的css选择器（例如:first-child或:last-child伪类）时，它非常方便。它将从DOM中删除元素，并允许您实现目标。

- Edd

---

我可以轻松地使用纯净的JavaScript完成它，开销很小，但是我正在寻找一个纯CSS的解决方案。不幸的是，看起来并没有这样的解决方案。 - Mike

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

- Marc A

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

- karlingen

---

这个想法浮现在脑海中，但感觉不太对。我也可以使用JavaScript相对容易地根据元素的可见性添加类（例如将类添加到开始和结束按钮），但这又感觉有点不干净。 - Mike

@mikemike 添加了另一个选项 - karlingen