Question

我有9张图片用于创建图像金字塔：

    []  []
  []  []  []
[]  []  []  []

每幅图像的方形尺寸相等，约为270像素×270像素。

我已将其设置为底行如下：

<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-3 img-hover">
    <img>
</div>

顶行看起来像这样：

<div class="col-xs-3"></div>
<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-3"></div>

但是中间行我不知道如何安排间距和图像列大小来制作它。

现在我正在做：

<div class="col-xs-1"></div>
<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-4 img-hover">
    <img>
</div>
<div class="col-xs-3 img-hover">
    <img>
</div>
<div class="col-xs-1"></div>

但是这导致中心图像有奇怪的间距，并且没有正确排列网格。

是否有更好的方法可以将12列网格系统拆分为＆＃39; 5＆＃39;段？

Answer 1

不要引用我这个，但也许你不应该使用bootstrap的网格，真的。

如果这有帮助的话，

This是我的快速模型。

<div class="container text-center">
  <div class="row">
    <div class="col-xs-6">
      <img src="http://placehold.it/135">
    </div>
    <div class="col-xs-6">
      <img src="http://placehold.it/135">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4"><img src="http://placehold.it/135"></div>
    <div class="col-xs-4"><img src="http://placehold.it/135"></div>
    <div class="col-xs-4"><img src="http://placehold.it/135"></div>
  </div>
  <div class="row">
    <div class="col-xs-3"><img src="http://placehold.it/135"></div>
    <div class="col-xs-3"><img src="http://placehold.it/135"></div>
    <div class="col-xs-3"><img src="http://placehold.it/135"></div>
    <div class="col-xs-3"><img src="http://placehold.it/135"></div>
  </div>
</div>

Answer 2

我使用.offset创建它以删除额外的div。

第一行：

<div class="row">
    <div class="col-xs-2 col-xs-offset-4 img-hover">
        <img>
    </div>
    <div class="col-xs-2 img-hover">
        <img>
    </div>
</div>

第二行：

<div class="row">
    <div class="col-xs-2 col-xs-offset-3 img-hover">
        <img>
    </div>
    <div class="col-xs-2 img-hover">
        <img>
    </div>
    <div class="col-xs-2 img-hover">
        <img>
    </div>
</div>

第三排：

<div class="row">
    <div class="col-xs-3 img-hover">
        <img>
    </div>
    <div class="col-xs-3 img-hover">
        <img>
    </div>
    <div class="col-xs-3 img-hover">
        <img>
    </div>
    <div class="col-xs-3 img-hover">
        <img>
    </div>
</div>

Answer 3

This是我只能使用Bootstrap做的最好的。

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-xs-push-2 text-center">
      <img src="http://placehold.it/270">
    </div>
    <div class="col-xs-4 col-xs-push-2 text-center">
      <img src="http://placehold.it/270">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 text-center">
     <img src="http://placehold.it/270" alt="">
     </div>
     <div class="col-xs-4 text-center">
     <img src="http://placehold.it/270" alt="">
     </div>
     <div class="col-xs-4 text-center">
     <img src="http://placehold.it/270" alt="">
     </div>
   </div>
   <div class="row">
     <div class="col-xs-3 col-xs-pull-1 text-center">
       <img src="http://placehold.it/270" alt="">
     </div>
     <div class="col-xs-2 col-xs-pull-1 text-center">
       <img src="http://placehold.it/270" alt="">
     </div>
     <div class="col-xs-2 col-xs-push-2 text-center">
       <img src="http://placehold.it/270" alt="">
     </div>
     <div class="col-xs-3 col-xs-push-3 text-center">
       <img src="http://placehold.it/270" alt="">
     </div>
   </div>
</div>

如何使用引导网格系统

3 个答案: