0

Есть два блока, которые нужно выровнять по высоте. Т.е. заполнить второй блок до низу.

<div class="row margin-top-5">
                    <div class="col-lg-4">
                      <div class="card">
                          <div class="card-block">
                              <h5 class="text-bold card-title">Your image:</h5>
                              <img class="img-responsive" src="img.png" style="width:75%">
                        </div>
                      </div>
                    </div>


                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-block">
                                <h4 class="card-title">Your information</h6>
                                <h6 class="card-title">Name: TEST</h6>
                                <h6 class="card-title">Surname: TEST</h6>
                                <h6 class="card-title">Age: TEST</h6>
                                <h6 class="card-title">Sex: Male</h6>
                                <h6 class="card-title">Married: No</h6>
                            </div>
                        </div>
                    </div>

В итоге получается что-то такое: введите сюда описание изображения Вопрос в том - как заставить блок col-md-8 быть одного размера с col-md-4? Может, его можно как-то вниз растянуть?

2 ответа 2

0

Вариант с display: table;:

.row {
    display: table;
}

.row > [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Вариант с flexbox:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
8
  • В первом случае накрылась вся страница. Во втором ничего не произошло.
    – myudasn
    28 янв 2018 в 16:15
  • Полагаю, "накрылась вся страница" потому, что классы row и col- у вас встречаются не только в этом месте. Просто добавьте свои классы этому фрагменту и, соответственно, поменяйте их в приведённом мной примере. 28 янв 2018 в 16:34
  • Демонстрация первого варианта: jsfiddle.net/rcrdvxqw Демонстрация второго варианта: jsfiddle.net/43qgn97a 28 янв 2018 в 16:41
  • Либо я слишком тупой, либо не работает. Перекашиваются в итоге даже элементы без таких классов
    – myudasn
    28 янв 2018 в 17:16
  • По приведённым ссылкам можете увидеть, что всё работает. Как написал выше, добавьте данному фрагменту свои классы. Например, замените <div class="row margin-top-5"> на <div class="row margin-top-5 eq-height">, а в приведённых мной примерах .row на .eq-height 28 янв 2018 в 17:42
0

В bootstrap 4 эта проблема была решена. Потому как, перешли на Flex раскладку . А если вспомнить Flex, то высота всех Flex-элементов будет ровна одному максимальному по высоте !!!!!

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.