Выровнять блоки

281

13 ноября 2017, 20:25

Использую bootstrap 3 и стандартные карточки (эскизы). Фиддл тут

  <div class="col-sm-6">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Название товара <small>Доп название</small></h3>
        <p>Лейблы</p>
        <p>Описание товара</p>
      </div>
    </div>
  </div>

Разделяю страницу на две части - левая для фильтров (сайтбар), а правая для вывода карточек с товарами. Карточки с товарами вывожу по 2 в ряд. Однако если у какой-нибудь из карточек слишком большое содержимое (текстовое описание товара в данном случае), то все карточки ниже едут и отображаются очень криво (смотри скриншот).

Ниже структура HTML с карточками. Использую стандартную сетку bootstrap на 12 столбцов. Как быть? Что можно сделать (помимо того, чтобы на сервере резать текст до определённом длины), чтобы блоки выводились без таких огромных провалов?

Ссылка на fiddle - https://jsfiddle.net/n72tuts8/

Answer 1

Как вариант можно обратиться к flex, немного доработав у себя сетку.

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}
.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}
.row-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

1) https://jsfiddle.net/timych/uo3ktyqj/1/

2) https://note.dimexio.ru/?p=1307

Ещё можно поиграться с display: inline-block. Тогда сетка не будет ломаться как при float, но визуально всё равно не очень.

Answer 2

Можно скриптом выравнивать. Только тогда надо добавить для данного блока

.thumbnail {
  height: 100%
}

Пример здесь.

Answer 3

Решил с помощью js. Функция находит самый высокий блок и подгоняет остальные под его размер. Вызывать функцию при открытии страницы и при изменении размера экрана.

   function rabbit_resizer() {
       let max=0;
       let ob=jQuery('.rabbit').find('.thumbnail');
       ob.each(function () {
           $(this).css('height', '100%');
           if ($(this).height() > max) {
               max=$(this).height();
           }
       });
       ob.each(function () {
           $(this).css('height', max+'px');
       });
   }