使用预定义的网格类在断点处隐藏 div

Question

我有三个div。在全屏设备上，每列都是父div "行"的 33%，正如我所期望的那样。当屏幕大小调整为更小时，我希望div B 消失，以便div A 和 C 以 50% 的比例扩展为彼此并排嵌套。

<div class="row">
    <div class="col-3 col-sm-6">A</div>
    <div class="col-3 col-sm-0">B</div>
    <div class="col-3 col-sm-6">C</div>
</div>

是否可以使用像col-sm-0这样的表示法来做到这一点，或者我必须手动编写媒体查询？

Answer 1

查看hidden类：https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

您可以在您的情况下使用hidden-sm。

引导程序 4：https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

您可以在您的情况下使用hidden-sm-down。

Answer 2

对于 v4 测试版，存在新的隐藏类

<div class="row">
    <div class="col-3 col-sm-6">A</div>
    <div class="col-3 d-sm-none">B</div>
    <div class="col-3 col-sm-6">C</div>
</div>