bootstrap 3.0响应5行图像

Question

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

在平板电脑或智能手机上观看时,我可以制作<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

回答你的另一个问题:

在平板电脑或智能手机上观看时,我可以制作<480像素,每个原始图像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的全部优点,它只是一个满足您要求的自定义版本.