Если блоки в сетке имеют какое-либо оформление, а количество информации в них разное, то наиболее красивым вариантом будет сделать их одной высоты. Кроме того, имея одинаковый размер, они не смогут ломать сетку.

У нас есть bootstrap сетка из 4-х блоков в ряд, которые на малых экранах должны идти по 2 в ряд:

Для них используется простой стиль заданный классом myitem:

В итоге мы получаем это:

Много текста
Много текста
Много текста
Много текста
Мало текста
Мало текста

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

А вот с плагином matchHeight все выглядит совсем иначе:

Много текста
Много текста
Много текста
Много текста
Мало текста
Мало текста
Установка:

Подключаем библиотеку jQuery и плагин matchHeight:

Настройки по умолчанию:
byRowtruetrue — выравнивать блоки по рядам
false — выравнивать все блоки
property‘height’CSS свойство для установки (height или min-height)
targetnullПозволяет указать самостоятельно блок с минимально возможной высотой, например, target: $(‘.myitem-main’) — блоков меньшей высоты, чем у блока с классом myitem-main не будет.
removefalsetrue — удалить привязку

Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: http://brm.io/jquery-match-height/

На эту тему:

Добавить комментарий

Ваш комментарий отправлен!

Комментарии: