垂直压缩引导行

Question

我有一个代码可以将文章呈现为 col-md-6 仅一行内的 div（如下面的代码所示）。每篇文章都有不同的高度。目标是（视觉上）获得总高度大致相等的两列文章。

<div class="row">
    <!-- FOR ARTICLE IN ARTICLES -->
        <div class="col-md-6">
            <article>
               <!-- content with variable height -->
            </article>
        </div>
    <!-- ENDFOR -->
</div>

问题是第一个和第三个 div 之间的白色垂直间隙，如下面的 sn-p 所示。是否可以在第一个 div 的下方显示第三个 div 而没有垂直间隙？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-6">
        <article style="background: yellow; height: 200px;">
           FIRST
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: red; height: 300px;">
           SECOND
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: green; height: 350px;">
           THIRD
        </article>
    </div>
    <div class="col-xs-6">
        <article style="background: gray; height: 200px;">
           FOURTH
        </article>
    </div>
   </div>

Answer 1

正如我在 cmets 中提到的，masonry.js 将是最好的方法。如果你想要一些更简单的东西，你可以简单地重新构建 html 参见示例https://jsfiddle.net/kvb5hb6f/12/

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-6">
    <div class="col-xs-12">
      <article style="background: yellow; height: 200px;">
        FIRST
      </article>
    </div>
    <div class="col-xs-12">
      <article style="background: green; height: 350px;">
        THIRD
      </article>
    </div>

  </div>
  <div class="col-xs-6">
    <div class="col-xs-12">
      <article style="background: red; height: 300px;">
        SECOND
      </article>
    </div>

    <div class="col-xs-12">
      <article style="background: gray; height: 200px;">
        FOURTH
      </article>
    </div>
  </div>
</div>