javascript - 仅 1 行的响应式网格

Question

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

所以，我有 1 行，其中有 4 列，这次的响应部分是，随着我不断缩小屏幕尺寸，我想删除不适合的元素。这意味着我开始一个接一个地显示 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>