css – 如何忽略Bootstrap按钮组中的隐藏元素?

前端之家收集整理的这篇文章主要介绍了css – 如何忽略Bootstrap按钮组中的隐藏元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个包含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解决方案?

解决方法

如果您不介意添加依赖项,我建议使用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中删除元素,让您实现目标.
原文链接:https://www.f2er.com/css/214942.html

猜你在找的CSS相关文章