html - 如何将 4 个盒子与 Bootstrap 网格系统对齐？

Question

我正在尝试使用 Bootstrap 网格系统对齐一些容器。最终结果应该如下图所示。

但我得到的是以下结果。

代码:

<div class="row">
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-6"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
</div>

我问这个问题主要是因为如果我反转 div，我会得到预期的结果。

代码:

<div class="row">
    <div class="img col-xs-12 col-sm-12 col-md-6"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
    <div class="img col-xs-12 col-sm-12 col-md-3"></div>
</div>

让您知道我正在尝试从以下位置重新创建图像布局可能会有所帮助:https://founderspledge.com/

Answer 1

我试着尝试创建那个布局并想出了这个:

<div class="container-fluid">

  <div class="row">
    <div class="lg col-md-6">
      <div class="sm col-md-6">
        small
      </div>
      <div class="sm col-md-6">
        small
      </div>
    </div>
    <div class="lg col-md-6">
      large
    </div>
  </div>

  <div class="row">
    <div class="lg col-md-6">
      large
    </div>
    <div class="lg col-md-6">
      <div class="sm col-md-6">
        small
      </div>
      <div class="sm col-md-6">
        small
      </div>
    </div>
  </div>

</div>

这里是一个例子的链接:

http://codepen.io/minipunch/pen/zKYOxO

如果这对您有帮助或您有任何疑问，请告诉我!