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

Question

我有一个包含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解决方案？

Answer 1

一种选择是简单地复制代码并在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;
  }