Bootstrap - 网格不对齐答案

【问题标题】：Bootstrap - Grid out of alignBootstrap - 网格不对齐
【发布时间】：2015-06-14 22:05:40
【问题描述】：

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

我创建了以下 bootply，但您可以看到大图像与行的底部不对齐。

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

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

【问题讨论】：

第二张图片的边距顶部偏离对齐方式：<div class="row" style="margin-top: 30px">
我需要这两个垂直图像之间的装订线间距与列之间的装订线间距相同，即 30px
如果您从 bootstrap .row 类中删除 margin-right ，这也可以修复它，但我不确定这是所需的解决方案。 stackoverflow.com/questions/19742804/…

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

为了通过 bootstrap 实现响应性，您必须为所有布局添加类 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>

【讨论】：

这是一个公平的观点，但问题是解决出现在大图像底部的间隙的问题。那个大图片需要填满所有可用的高度。
我刚刚注意到我没有正确阅读问题。我会在一分钟内更新。
如果你想通了请告诉我，否则我会在下班后为你制作一个迷你样本。