У нас есть bootstrap сетка из 4-х блоков в ряд, которые на малых экранах должны идти по 2 в ряд:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="row"> <div class="col-xs-6 col-sm-6 col-md-3"> <div class="myitem">Много текста<br />Много текста<br />Много текста</div> </div> <div class="col-xs-6 col-sm-6 col-md-3"> <div class="myitem">Мало текста</div> </div> <div class="col-xs-6 col-sm-6 col-md-3"> <div class="myitem"><img width="100%" src="atuin.png" /></div> </div> <div class="col-xs-6 col-sm-6 col-md-3"> <div class="myitem">Мало текста</div> </div> </div> |
Для них используется простой стиль заданный классом myitem:
|
1 2 3 4 5 6 |
.myitem { border: 2px solid #337AB7; background: #BFE2FF; padding: 10px 20px; margin: 10px 0; } |
В итоге мы получаем это:
Много текста
Много текста
Много текста
Много текста
Много текста
Много текста
Много текста
Мало текста
Мало текста
Во-первых, это не очень красиво, а во-вторых, перейдя на малый экран, вы увидите, как расползается эта сетка.
А вот с плагином matchHeight все выглядит совсем иначе:
Много текста
Много текста
Много текста
Много текста
Много текста
Много текста
Много текста
Мало текста
Мало текста
Установка:
Подключаем библиотеку jQuery и плагин matchHeight:
- Скачать: jquery.matchHeight.js
- Скачать: jquery.matchHeight-min.js
|
1 2 3 |
$(function() { $('.myitem').matchHeight(options); }); |
Настройки по умолчанию:
| byRow | true | true - выравнивать блоки по рядам false - выравнивать все блоки |
| property | 'height' | CSS свойство для установки (height или min-height) |
| target | null | Позволяет указать самостоятельно блок с минимально возможной высотой, например, target: $('.myitem-main') - блоков меньшей высоты, чем у блока с классом myitem-main не будет. |
| remove | false | true - удалить привязку |
Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: http://brm.io/jquery-match-height/
Отличное решение!