Bootstrap 中的动态行

Question

我有 8 张图像要显示在 Bootstrap 的网格系统中。感谢那个代码：

<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

在lg、md、sm屏幕尺寸上，是这样显示的（"X"代表图片）：

XXXX

在 xs 屏幕尺寸上，像这样：

X

我要达到：

在 lg、md 和 sm 屏幕尺寸上显示：

XXXX

xs屏幕显示尺寸：

XX

有谁知道怎么做吗？

Answer 1

只需添加您的 xs 声明，使图像容器以该大小跨越 6 列：

<div class="row">
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

<div class="row">
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
    <div class="col-xs-6 col-sm-3">
        <img class="img-responsive" src="img/img1.png">
    </div>
</div>

Answer 2

在 Bootstrap 中，我们使用 sm（小型设备）之类的声明来定义哪些媒体查询将针对特定分辨率触发列 classes。

xs代表特小（smartphones/mobiles最多） sm 代表小型设备（平板电脑最多） md 代表中型设备（一些较旧的非高清台式机和笔记本电脑最多） lg 代表大型设备（高清屏幕、视网膜设备等）

当您使用 col-sm-3 之类的 class 时，您是在告诉 small devices 和元素将占据 3 列。您可以定义多个 classes 来为每个分辨率指定列：

col-xs-12 col-sm-6 col-md-4 col-lg-2

那么就会翻译成下面这样：

从xs分辨率或以下，元素将占据12列。

从sm分辨率或以上，元素将占据6列。

从md分辨率或以上，该元素将占据4列。

从lg分辨率或以上，该元素将占据2列。

不要忘记对列应用最小高度值，这样如果图像高度有不同的大小，它就不会错误地环绕。

有关 grid/column 系统的更多详细信息，请查看此 link。

Bootstrap 中的动态行

Dynamic rows in Bootstrap

css

grid-system

twitter-bootstrap