0

我在 Bootstrap 的网格系统中显示了 8 张图像。感谢该代码：

<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

XXXX

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

X

X

X

X

X

X

X

X

我想实现：

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

XXXX

XXXX

并在 xs 屏幕尺寸上显示：

XX

XX

XX

XX

有谁知道怎么做？

4

2 回答 2

3

只需添加您的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>
于 2015-12-14T16:35:04.637 回答
0

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

xs代表超小型（大多数智能手机/手机） sm代表小型设备（大多数平板电脑） md代表中型设备（大多数老年人非高清台式机和笔记本电脑） lg代表大型设备（高清屏幕、视网膜设备等）

当您使用像col-sm-3您这样的类时，元素上的 fromsmall devices和 on 将占据 3 列。您可以定义多个类来为每个分辨率指定列：

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

然后它将转换为以下内容：

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

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

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

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

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

有关网格/列系统的更多详细信息，请查看此链接。

于 2015-12-14T17:12:39.780 回答