Как я могу сделать неровные строки для сетки с двумя столбцами с помощью Bootstrap/css?

Question

Мне нужно устранить большие промежутки между полями в левом столбце, но я не могу понять, как это сделать. (см. изображение)

У меня есть шаблон html, который генерирует содержимое div с помощью цикла for (цикл из 2 столбцов col-xs-6), поэтому я не могу устанавливать значения статической высоты и плавать (потому что количество строк всегда меняется).

Код выглядит примерно так:

<div class="row"> 
<div class="col-xs-6" py:for="title, content in data"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <div class="panel-title"> 
       { title } 
      </div> 
     </div> 
     <div class="col-xs-12" py:for="line in content"> 
      { line } 
     </div> 
    </div> 
</div> 

Кто-нибудь знает некоторые CSS колдовство, чтобы помочь мне?

Answer 1

На данный момент времени начальной загрузки не поддерживает смещение сетки в Pinterest подобный стиль.

Хотя, вы можете использовать загрузчик в сочетании с чем-то вроде масонства сетки, чтобы получить эффект, который вы ищете:

http://masonry.desandro.com/

Answer 2

Id высоту используйте спички, как он подходит вашему вопросу больше. Вот что ты делаешь. Загрузите это и добавьте в свои скрипты. Затем добавьте класс match-height calldd в ваши столбцы div, которые вы хотите быть одинаковой высоты.

https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js

$(function() { 
    $('.match-height').matchHeight(); 
}); 

Если какие-либо вопросы, заменить $ с JQuery