Question

我需要改变我的设计，在一行中有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。这意味着每个div占据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>

＆＃13;

<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>

＆＃13;

Answer 2

看起来你真的想要一个有七列的设计。幸运的是，Bootstrap是高度可定制的，它们有handy UI for creating your own build。一旦你有一个七列网格（或者让你说你自己很容易，再提出一个图像，并与8列网格妥协）然后使用col-xs-8 col-sm-1，这将使图像成为8列在超小屏幕上宽（基本全宽），在小屏幕上宽1列（约1/8宽）。

如何设计一排图像？

2 个答案: