Ответ 1

Есть несколько способов справиться с этим:

• Дайте всем элементам вашего портфолио высоту набора.
• Используйте что-то вроде кладки, чтобы динамически "подгонять" элементы в доступное пространство.
• Используйте чувствительные классы и clearfix, как описано в документе под заголовком Отказоустойчивый столбцы сбрасывает, в Grid.
• Используйте jQuery для динамического изменения высоты столбца.

Если ваш контент динамически генерируется, так что вы не знаете, какие элементы будут иметь более длинный контент, и у вас есть разные макеты, установленные для разных точек останова, подход адаптивных классов может быть медведем для адаптации. Я использую небольшой трюк. После каждого элемента в сетке я добавляю div, чтобы применить мини-clearfix к использованию медиа-запросов. Это дополнительная разметка, но она прекрасно решает проблему и позволяет мне иметь читаемую и поддерживаемую разметку, избегая при этом использования javascript для настройки макета. Вот пример использования вашей разметки:

Обновлен Bootply

<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
    <div class="col-lg-2 col-sm-3 col-xs-4">
        <div class="panel panel-default">
            <div class="panel-body">
                <a href="#">
                    <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
                </a>
            </div>
            <div class="panel-footer">
                This is text
            </div>  
        </div> 
    </div>
    <div class="clear"></div> <!--Here the added div after every element-->
  ....
</div> <!--/.portfolio.row-->

CSS

@media (max-width: 767px) {
    .portfolio>.clear:nth-child(6n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .portfolio>.clear:nth-child(8n)::before {
      content: '';
      display: table;
      clear: both;
    }
}
@media (min-width: 1200px) {
    .portfolio>.clear:nth-child(12n)::before {  
      content: '';
      display: table;
      clear: both;
    }
}

Если вы предпочитаете маршрут jQuery (опять же, это предполагает, что вы добавили "портфель" класса в строку, содержащую элементы вашего портфеля, для упрощения таргетинга):

var row=$('.portfolio');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

Ответ 2

Подход "только" Bootstrap - использовать Bootstrap .clearfix. Вы должны перебирать это количество х столбцов, поэтому в вашем случае после <6 > col-lg-2 будет помещен clearfix div. Это будет работать для ширины экрана lg.

http://www.bootply.com/SV0kI3TSN3

Однако, поскольку вы используете несколько быстро реагирующих точек останова, вам нужно поместить clearfix, где также будут обматываться столбцы md и xs. Это предотвратит разрыв на всех ширинах экрана.

http://www.bootply.com/3TsF0arPRS

Обновление 2017

1 - Как объяснялось выше, подход 'clearfix' (рекомендованный Bootstrap), как это (требуется итерация каждые x столбцов). Это заставит обернуть каждые 3 столбца

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (одиночный уровень)

Clearfix Demo (реагирующие уровни)

Существует также CSS-only вариант "clearfix" (неподдерживаемый). http://www.codeply.com/go/lUbs1JgXUd

2 - Сделайте колонки одинаковой высоты (используя flexbox):

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

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox равная высота Демо

3 - подход столбцов CSS3 (решение для масоновского CSS).

Это не является родным для Bootstrap 3, но другой подход использует CSS-столбцы. Одним из недостатков этого подхода является порядок столбцов сверху вниз, а не слева направо.

Кадры CSS3 Демо

4 - подход JavaScript/jQuery

Наконец, вы можете использовать плагин, такой как Isotope/Masonry:

Демо-версия макета для Bootstrap

Подробнее о столбцах переменной высоты загрузки

Ответ 3

У меня была та же проблема с двумя панелями бок о бок подряд.

Я не нашел CSS-хака для этого, поэтому я дал двум панелям класс same-height, и я использую этот JS-код.

boxes = $(".same-height");
maxHeight = Math.max.apply(Math, boxes.map(function () {
    return $(this).height()
}).get());
boxes.height(maxHeight);

Вот ссылка BootPly, которая использует приведенный выше код: http://www.bootply.com/622XyQ0oH5

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