Как сделать колонки одинаковой высоты в Bootstrap3?

Question

[ZaurK]

Здравствуйте! При выводе списка товаров в блоках col-sm-6 в Bootstrap при разном содержимом колонок они приобретают разную высоту и получается вот такая проблема


Существует ли способ решения именно с использованием Bootstrap?

Answer 1

[proskurninra]

Решение тут css.yoksel.ru/flexbox

Я сделал и у меня решилась подобная проблема.
Для этого я в css создал класс row-flex

.row-flex {
    display: flex;
    flex-flow: row wrap;
}

и в html применил класс row-flex

<div class="container-fluid">
    <div class="row row-flex">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            ... содержимое блока ...
        </div>
    </div>
</div>

всё работает!

Comments

[loed]

что то не заработало у меня

[yaslonane]

спасибо, помогло :)

[max3wq]

Спасибо! Я эти две строки два дня искал! Оказалось так просто. display: flex;
flex-flow: row wrap; и все растянулось по высоте на Bottstrap 3 как надо. Смог сделать плавающее меню наконец то)

Answer 2

[Тимур]

Вот честно нагуглил и чутка модифицировал :)
https://jsfiddle.net/timych/uo3ktyqj/1/

Comments

[ShamblerR]

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
вместо тысячи слов
+ поддержки старых браузеров нет

[Дмитрий]

подскажи, для чего минусовой margin добавил?

Answer 3

[Nikolay_Salnikov]

Вот тут можно посмотреть пример колонок одинаковой высоты для bootstrap 3 и 4, с использованием flex-wrap
Колонки одинаковой высоты Bootstrap 3

Answer 4

[Ivanitch]

Колонки одинаковой высоты в Bootstrap