Html 引导-网格不对齐

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

我已经创建了下面的引导层，但是正如您所看到的，大图像没有与行的底部对齐

---

我做错了什么？我尝试使用表格、表格行和表格单元格，但无法找到解决方案。

为了实现引导的响应性，您必须为所有布局添加类

col-**-number

，如

col-md-12

，

col-sm-12

，

col-xs-12

等。。您可以阅读更多有关的内容及其行为。由于涉及到div的垂直对齐，这通常是一个棘手的问题，具体取决于div的条件。位置、固定高度等。。cstrick中有一个很好的例子，可以解决您正在寻找的相等列的确切问题。正如我所说的，这不是小事

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

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

第二个图像中的页边距顶部偏离对齐：

我需要这两个垂直图像之间的页边距与两个垂直图像之间的页边距大小相同如果从bootstrap.row类中删除右边距，这也会修复它，但我不确定这是理想的解决方案。这是一个公平的观点，但问题是解决问题的差距，出现在底部的大图。那张大图需要填满所有可用的高度。我只是注意到我没有正确阅读问题。我马上更新。谢谢你。。。如果你能弄明白，请告诉我，否则我会在下班后为你做一个小样品。