Бутстрэп Колонны равной высоты

Question

Дизайн

Привет всем, у меня маленькая проблема.

В настоящее время я работаю над проектом с пользовательской планировкой. Изображение является частью макета, где я нахожу свою проблему.

Мне нужно сделать часть сайта, с продуктами слева, посередине и справа. В настоящее время я написал так:

<div class="container-fluid">
  <div class="row">
    <div class="col-12 offset-lg-1 col-lg-3 product-left">
      <div class="card"></div>
    </div>
    <div class="col-12 col-lg-4 product-middle">
      <div class="card pm-first"></div>
      <div class="card pm-second"></div>
    </div>
    <div class="col-12 col-lg-3 product-right">
      <div class="card"></div>
    </div>
  </div>
</div>

Я просто не могу понять, как убедиться, что два продукта в середине всегда будут иметь одинаковую высоту с теми, что слева и справа.

Я надеюсь, что кто-нибудь может мне помочь, я просто не вижу этого сейчас, извините за этот вопрос новичка: D

Answer 1

Попробуйте это

Добавить "row-flex row-flex-wrap" класс к вашей строке

<div class="container-fluid">
    <div class="row row-flex row-flex-wrap">
        <div class="col-12 offset-lg-1 col-lg-3 product-left">
            <div class="card"></div>
        </div>
        <div class="col-12 col-lg-4 product-middle">
            <div class="card pm-first"></div>
            <div class="card pm-second"></div>
        </div>
        <div class="col-12 col-lg-3 product-right">
            <div class="card"></div>
        </div>
    </div>
</div>

Файл CSS

.row-flex, .row-flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 1 auto;
}
.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex: 0;
}
.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
    margin: -.2px; /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div, .row-flex > div[class*='col-'] div {
    width:100%;
}
.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}
.flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
}