Задать вопрос

Как Выровнять высоту колонок в bootstrap?

Есть несколько блоков (для примера 2) в 1 ряд:

<div class="container-fluid">
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="row">
            <div class="items item-right col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row">
                            <div
                                class="col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <div class="text-uppercase text-dark-blue">
                                    <h4>Заголовок 1</h4>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-5 col-sm-2 col-md-5 col-lg-5">
                              ТУТ КАРТИНКА
                            </div>

                            <div class="col-xs-7 col-sm-10 col-md-7 col-lg-7">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>
                                      1 строка текста
                                      </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="row">
            <div class="items item-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row">
                            <div
                                class="col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-10 col-lg-10">
                                <div class="text-uppercase text-dark-blue">
                                    <h4>Заголовок 2</h4>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-5 col-sm-2 col-md-5 col-lg-5">
                                ТУТ КАРТИНКА
                            </div>

                            <div class="col-xs-7 col-sm-10 col-md-7 col-lg-7">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                        <p>
                                      Много строк текста. Много строк текста.Много строк текста.Много строк текста.
                                      </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


Проблема в том, что высота блока, зависит от контента, который в нем размещается, например от высоты картинки/количества текста, как сделать так, чтобы высота блоков была такая, как наибольший по высоте блок? Т.е. чтобы все блоки в ряду были одинаковых размеров. Может быть в bootstrap есть спец. решение этой проблемы? Пробовал так: Как Выровнять высоту колонок в bootstrap?, не помогло.

Вот пример:
7730905.jpg
  • Вопрос задан
  • 4483 просмотра
Подписаться 4 Оценить Комментировать
Решения вопроса 1
SergheySan
@SergheySan
Front-end разработчик
есть небольшой, но очень хороший jQuery plugin matchHeight
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы