Css 引导网格：在一行中垂直放置多个div？

在Bootstrap

.row

中，我有任意数量的div（带有类

col-xs-12 col-sm-6 col-md-4 col-lg-3

），每个div都有自己的高度

结果（在大屏幕上）如下图所示（

.row

为红色，

.col

为黑色）：

我希望每个div都尽可能高，就在上面div的正下方，如下图所示。这是否可以通过引导实现，而不必手动将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>

[材料]
[材料]
[材料]
...

比尔·莱因哈特为您创建了一个很好的布局

这将有助于您：

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>

.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;
}

---

请给我们看一些代码。好的，编辑我的问题，但这只是一行，有很多div。这叫做砌石布局。目前还没有纯CSS的方法来实现这一点，你必须使用JavaScript来实现。@Aziz是正确的使用哦：（谢谢你的回答，我会查一下）。