Bootstrap/CSSを使用して2列のグリッドに不均一な行を作成するにはどうすればよいですか？

Question

左の列のボックス間に大きなギャップをなくす必要がありますが、どうやってそれを行うのか分かりません。

私は、forループ（2列-xs-6列の行）でdivコンテンツを生成しているhtmlテンプレートを持っているので、静的な高さの値を設定できず、行数は常に変化しています）。

コードは次のようになります。

<div class="row"> 
<div class="col-xs-6" py:for="title, content in data"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <div class="panel-title"> 
       { title } 
      </div> 
     </div> 
     <div class="col-xs-12" py:for="line in content"> 
      { line } 
     </div> 
    </div> 
</div> 

誰も私を助けるためにいくつかのCSSの魔法を知っていますか？タイムブートストラップのこの時点で

Answer 1

はPinterestのようなスタイルでグリッドをオフセットサポートしていません。

が、あなたが探している効果を得るために石造グリッドのようなものと組み合わせて、ブートストラップを使用することができます

http://masonry.desandro.com/

Answer 2

Idを使用マッチの高さを、それはより多くのあなたの質問に合って。ここにあなたがしていることがあります。 これをダウンロードしてスクリプトに追加してください。次に、同じ高さにしたいdivカラムにcalldd match-heightクラスを追加します。

https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js

$(function() { 
    $('.match-height').matchHeight(); 
}); 

すべての問題は、jQueryを使って$を交換した場合