Bootstrap - 网格不对齐

Question

我想创建一个响应如下的网格（忽略下图中的尺寸，它们用于演示对齐的网格）：

我创建了以下bootply，但是你可以看到大图像没有与行的底部对齐。

http://www.bootply.com/2p6uXgXJNT

我做错了什么？我曾尝试使用Table，Table-Row和Table-Cell但无法找到解决方案。

Answer 1

为了通过引导程序实现响应，您必须为所有布局col-**-number添加类，例如col-md-12，col-sm-12，col-xs-12等。您可以阅读更多关于boostrap grid sytstem及其行为的信息。因为它涉及div的垂直对齐，一般来说这是一个棘手的问题，取决于你的div的条件。放置，固定高度等.CssTricks中有一个很好的guide解决了你正在寻找的相同列的确切问题。正如我所说的那样并非无足轻重。

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-8 col-xs-12">
      <img src="http://placehold.it/1280x700" class="imgFullSize">
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <img src="http://placehold.it/452x250" class="imgFullSize">
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px">
          <img src="http://placehold.it/452x250" class="imgFullSize">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

除非在这种情况下强制图像的高度，否则图像将仅按比例填充div中可用的空间。