Question

我已经使用过一段时间了，但无法解决这个问题。

所以，我有1行，其中有4个cols，这次响应部分是因为我不断缩小屏幕尺寸，我想放弃那些不合适的元素。这意味着我开始在另一个旁边显示4个图像，如果屏幕较小则稍后显示我只想显示前3个，最后可能只显示1个。

是否可以使用CSS执行此操作，或者我需要一些Javascript。

我希望我解释得很好。

Answer 1

要根据显示尺寸完全隐藏或显示，请使用： visible-xs-*，visible-sm-*，visible-md-*，visible-lg-*，hidden-xs，hidden-sm，hidden-md，hidden-lg

*对应block，inline和inline-block，具体取决于您的需求。

<div class="row">
    <div>
        1
    </div>
    <div class="hide-xs show-sm-block">
        2
    </div>
    <div class="hide-xs show-sm-block">
        3
    </div>
    <div class="hide-sm show-md-block">
        4
    </div>
    <div class="clearfix"></div>
</div>

Answer 2

如果您希望div 4在小屏幕上消失，您可以将其隐藏为小屏幕。

http://getbootstrap.com/css/#responsive-utilities

<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
    1
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
    2
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
    3
</div>
<div class="col-xs-12 col-md-3 hidden-sm">
    4
</div>

响应网格只需一行

2 个答案: