Бутстрап Колонны не складываются прямо?

Question

У меня на моей странице много блоков/портлетов разной высоты, и я бы хотел, чтобы они аккуратно складывались и вписывались в пустое пространство без пробелов. http://www.bootply.com/pYK3fLTn7c В следующем примере блок 4 должен находиться под блоком 1, и даже в том месте, где он находится (под блоком 2), он не должен вписываться в пробел? Pinterest имеет хороший пример этого (или http://jsfiddle.net/M34e2/, но моя ширина может отличаться). Или мы можем сделать это без добавления плагинов (у меня уже есть сортировка)? http://www.jqueryscript.net/demo/Responsive-Fluid-Drag-and-Drop-Grid-Layout-with-jQuery-gridstack-js/ Спасибо за любую помощь заранее.

<div class="container-fluid"> 

    <div class="col-lg-4" style="height: 200px; border: 1px #ccc solid"> 
    <h1>Block 1</h1> 
    </div> 
    <div class="col-lg-4" style="height: 100px; border: 1px #ff0 solid"> 
    <h1>Block 2</h1> 
    </div> 
    <div class="col-lg-4" style="height: 150px; border: 1px #f00 solid"> 
    <h1>Block 3</h1> 
    </div> 
    <div class="col-lg-4" style="height: 175px; border: 1px green solid"> 
    <h1>Block 4</h1> 
    </div> 
    <div class="col-lg-4" style="height: 175px; border: 1px blue solid"> 
    <h1>Block 5</h1> 
    </div> 
    <div class="col-lg-4" style="height: 75px; border: 1px pink solid"> 
    <h1>Block 6</h1> 
    </div> 

</div><!-- /.container --> 

Answer 1

Для обеспечения блока 4 находится под 1, вам нужно будет использовать строку:

<div class="container-fluid"> 
    <div class='row'> 
    <div class="col-lg-4" style="height: 200px; border: 1px #ccc solid"> 
     <h1>Block 1</h1> 
    </div> 
    <div class="col-lg-4" style="height: 100px; border: 1px #ff0 solid"> 
     <h1>Block 2</h1> 
    </div> 
    <div class="col-lg-4" style="height: 150px; border: 1px #f00 solid"> 
     <h1>Block 3</h1> 
    </div> 
    </div> 
    <div class='row'> 
    <div class="col-lg-4" style="height: 175px; border: 1px green solid"> 
     <h1>Block 4</h1> 
    </div> 
    <div class="col-lg-4" style="height: 175px; border: 1px blue solid"> 
     <h1>Block 5</h1> 
    </div> 
    <div class="col-lg-4" style="height: 75px; border: 1px pink solid"> 
     <h1>Block 6</h1> 
    </div> 
    </div> 
</div> 

http://www.bootply.com/xWzvbdxvvi#

И заметьте, только чтобы убедиться, что вы знаете -lg классов работает только на более высокое разрешение. На меньших экранах он будет складывать один на другой (блок 2 находится под блоком 1) для экранов -md, -sm и -xs.

[UPDATE: 2015-03-18 в комментарии] Если все, что вам нужно сделать, это иметь их укладывают вертикально без пробелов, только другой вариант заключается в следующем:

<div class="container-fluid"> 
    <div class="row"> 
    <div class='col-lg-4'> 
     <div style="height: 200px; border: 1px #ccc solid"> 
     <h1>Block 1</h1> 
     </div> 
     <div style="height: 175px; border: 1px green solid"> 
     <h1>Block 4</h1> 
     </div> 
    </div> 
    <div class='col-lg-4'> 
     <div style="height: 100px; border: 1px #ff0 solid"> 
     <h1>Block 2</h1> 
     </div> 
     <div style="height: 175px; border: 1px blue solid"> 
     <h1>Block 5</h1> 
     </div> 
    </div> 
    <div class="col-lg-4"> 
     <div style="height: 150px; border: 1px #f00 solid"> 
     <h1>Block 3</h1> 
     </div> 
     <div style="height: 75px; border: 1px pink solid"> 
     <h1>Block 6</h1> 
     </div> 
    </div> 
    </div> 
</div> 

Это собирается укладывать вертикально в той же колонке, но это ограничивает вас совершенно по-разному.

Bootstrap - это ручная настройка сетки на дисплей, который вы хотите получить для каждого размера просмотра ... это НЕ то, что будет динамично пытаться скомпоновать ваши разделы вместе, как газета, поскольку ссылка, которую вы предоставили, ,

Answer 2

Пример ссылки, который вы указали в макете изменений при обновлении и использует js. Если вы используете бутстрап, не добавляя строки, вы дадите менее прогнозируемый макет, если используете сетку бутстрапа с 12 столбцами, любые cols добавили более 12 оберток к следующей строке. Класс -lg предназначен для рабочего стола/более высокого разрешения. Вы можете добавить несколько классов в каждый div для обработки меньших разрешений.