Bootstrap网格：连续多个div的垂直放置？

Question

在Bootstrap .row中，我有一个任意数量的div（类col-xs-12 col-sm-6 col-md-4 col-lg-3），每个div都有自己的高度。

结果（在大屏幕上）就像这张图片（.row为红色，.col为黑色）：

我希望每个div尽可能高，就在它上面的div下方，如下图所示。这是可能的Bootstrap，而不必手动将我的div排序成列？

这是我的代码：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> [stuff] </div>
  ...
</div>

Answer 1

Bill Reinhardt创建了一个很好的布局供你开始。

这可以帮到你： https://codepen.io/billreinhardt/pen/ZGVNJL

<强> HTML：

<div class="container">
    <h1>Masonry CSS with Bootstrap</h1>
    <div class="row">
<div class="item">
  <div class="well"> 
    1 blah blah blah
  </div>
</div>
<div class="item">
    <div class="well"> 
    2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
    3 blah blah blah blah blah blah blah blah h
    </div>
</div>
<div class="item">
    <div class="well">
    blah blah blah blah 
    </div>
</div>
<div class="item">
    <div class="well"> 
      blah blah blah. The container inside the item must be position:relative
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well">
    blah blah blah blah blah blah blah blah h
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
    blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
</div>
<div class="item">
    <div class="well"> 
      blah blah blah. The container inside the item must be position:relative
    </div>
</div>

    

<强> CSS：

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

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.well {
 position:relative;
 display: block;
}