html - 如何使用 Bootstrap 网格系统组织图像金字塔

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 列网格系统拆分为“5”部分？

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>