Question

我遇到了bootstrap 3.0在一行中制作5张图像并使这些响应有问题的问题？网格系统基于12，那么如何制作5个图像并且它们看起来居中而没有任何空格？

当我在平板电脑或智能手机上查看时，我可以制作＆lt; 480像素，每张原始图像是2张图像吗？现在它显示了5张图像？

这是我的代码：

<div class="row">
 <div class="col-md-2">
 <img class="img-responsive" src="/images/img1.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
 <img class="img-responsive" src="/images/img3.jpg" />
 </div>
   <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
  <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

正如您所看到的，我正在使用col-md-2以及img-responsive？但它不能正常工作，因为它不集中

Answer 1

任何一方都可以有一个空列：

<div class="row">
 <div class="col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

Answer 2

回答你的另一个问题：

当我在平板电脑或智能手机上观看时，我也可以制作＆lt; 480 px，每个原始2张图片？现在它显示每个下面5个图像其他...

答案是肯定的。开箱即用，另外使用col-xs-6，对于小于 768px 的所有视口，每行可获得2张图像。

<div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1">
   <img class="img-responsive" src="/images/img1.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img2.jpg" />
 </div>

 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img3.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
 <div class="col-xs-6 col-md-2">
   <img class="img-responsive" src="/images/img4.jpg" />
 </div>
</div>

如果您想通过LESS，SASS或使用自定义程序自定义Bootstrap：http://getbootstrap.com/customize/，您当然可以调整网格列和断点。我的意思是，你可以制作10列网格或5列网格，如果你希望你的xs断点为480px，你也可以这样做。

为此，您需要修改网格系统值：http://getbootstrap.com/customize/#grid-system和http://getbootstrap.com/customize/#media-queries-breakpoints

它仍然是Bootstrap的全部优点，它只是满足您要求的自定义版本。

Answer 3

您需要创建一个列类（我称之为col-sm-5cols，但可以随意调用它），样式就像Bootstrap的现有列一样，然后在它的时候给它20％的宽度正确的大小，通过媒体查询。

.col-sm-5cols{
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (min-width: 768px) {
.col-sm-5cols {
        width: 20%;
        float: left;
    }
}

示例：http://www.bootply.com/YpKhYwVqfD

要在移动设备上设置2列设置，您可以使用col-sm-6关闭，或者使用480px和width:50%

的媒体查询再次自定义较小的列

bootstrap 3.0响应5行图像

3 个答案: