Загрузочная сетка: вертикальное размещение нескольких div в строке?

Question

В бутстрапе .row у меня есть произвольное количество div (с классами col-xs-12 col-sm-6 col-md-4 col-lg-3), каждый из которых имеет свою собственную высоту.

Результат (на большом экране), как изображения (.row в красном, .col ы в черном):

Я хотел бы каждый ДИВ быть столь же высоко, как это может, право ниже div над ним, как на рисунке ниже. Возможно ли это с помощью Bootstrap, без необходимости вручную сортировать мои divs в столбцы?

Вот мой код:

<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

Билл 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; 
}