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屏幕尺寸上，显示如下（＆＃34; X＆＃34;代表图像）：

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（小型设备）这样的声明来定义哪些媒体查询将触发特定分辨率的列类。

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

当您使用像col-sm-3这样的类时，您要告诉small devices，并且该元素将占用3列。您可以定义多个类来为每个分辨率指定列：

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

然后会转化为以下内容：

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

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

从md分辨率或更高分辨率，该元素将占用4列。

从lg或更高分辨率，元素将占用2列。

不要忘记将最小高度值应用于列，以便在图像高度不同的情况下不会错误地包围错误。

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

Bootstrap中的动态行

2 个答案: