Пробелы в сложенных строках Bootstrap: решения

В сетках на основе Bootstrap часто возникают проблемы с пробелами при укладке плиток различной высоты . Чтобы решить эту проблему, рассмотрите следующие подходы:

1. Установите высоту элементов:

Назначьте фиксированную высоту всем элементам в портфолио, чтобы обеспечить единообразное выравнивание.

2. Masonry Layout:

Используйте такой инструмент, как Masonry, для автоматической регулировки высоты элементов и размещения их в доступном пространстве.

3. Сброс адаптивных столбцов:

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

4. Clearfix с медиа-запросами:

После каждого элемента добавьте div с мини-clearfix. Это можно скрыть с помощью медиа-запросов, эффективно решая проблему пробелов.

Пример кода:

  

    

      ... (Element content)
    
  
  
  
  ... (Additional elements)

@media (max-width: 767px) {
  .portfolio > .clear:nth-child(6n)::before {
    /* Clearfix for mobile devices */
  }
}

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); // Set element heights uniformly
  });
});