如何设计图像的行？(How to design a row of images?)

我需要改变我的设计有7个箱中单列。 每个盒子将有一个形象和它下面的标题。 我需要有具体的左，右页边距，类似以下内容：

       My images
       img1  img2  img3  img4  img5  img6  img7 
        c1    c2    c3    c4    c5    c6    c7

码

  <h3>My Images</h3>
   <div class="row">
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C1</p>
    </div>
     <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C2</p>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C3</p>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C4</p>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C5</p>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C6</p>
    </div>
    <div class="col-xs-3">
        <a href="#" class="thumbnail">
             <img src="http://placehold.it/350x150" class="img-responsive">
        </a>
        <p>C7</p>
    </div>
  </div>

Answer 1:

使用col-xs-3将只允许你有一排4列（因为格子只有12列）。

由于需要额外的上小屏幕上的一个单独的行每列（手机屏幕或xs屏幕），使用col-xs-12和col-sm-1 这将意味着，每个格占据12接通列xs屏幕和1上柱sm屏幕及以上。

<div class="col-xs-12 col-sm-1">
    <a href="#" class="thumbnail">
         <img src="http://placehold.it/350x150" class="img-responsive">
    </a>
    <p>C1</p>
</div>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-1"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> <p>C1</p> </div> <div class="col-xs-12 col-sm-1"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> <p>C2</p> </div> <div class="col-xs-12 col-sm-1"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> <p>C3</p> </div> <div class="col-xs-12 col-sm-1"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> <p>C4</p> </div> <div class="col-xs-12 col-sm-1"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> <p>C5</p> </div> </div> </div> 

Answer 2:

好像你真的想与七列的设计。 幸运的是，自举是高度可定制的，他们有一个用于创建自己的身材很方便的用户界面 。 一旦你有一个七柱网（或让我们说，你可以很容易对自己，拿出1更多的图像，并与8列格妥协），然后使用col-xs-8 col-sm-1这将使图像上额外小屏幕8列宽（基本上全宽），1列宽（约1/8的宽度）在小屏幕上。

文章来源: How to design a row of images?