具有灵活布局的Bootstrap网格

Question

我正在使用bootstrap来创建包含项目的网格。问题是它们通常会有不同的高度，我希望它们相互流动。

我尝试在bootply中使用这个示例，但它会在一个框的底部插入以填充下一列中的空格。

<div class="col-md-4 whats-on-card card">
</div>

/*STYLES*/
*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 17em;
 -webkit-column-width: 17em;
 -moz-column-gap: -1em;
 -webkit-column-gap: -1em; 

 }

 .whats-on-card {
  display: inline-block;
  margin:  0.25rem;
  padding:  1rem;
  width:  100%; 
 }

http://www.bootply.com/85739

我的例子就在这里 http://www.allaboutus.ie/whats-on/

基本上，如果解决方案我已经工作，除非没有切箱子......

这可能与CSS＆amp;引导？