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

Question

我有三个div。在全屏设备上，每列占父级div的33％＆＃39; row＆＃39;这是我所期待的。当屏幕调整为较小时，我希望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。

Bootstrap 4： https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

您可以在案例中使用hidden-sm-down。

Answer 2

对于v4 beta，存在new hiding classes

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