Как на bootstrap 4 сделать все блоки одинаковой высоты? На новой FLEX сетке?

Question

[Stacy None]

Добрый день!
Нужна помощь с новой сеткой bootstrap 4, так как документации толковой на русском я не нашел, решил обратиться к вам.
Допустим есть сетка:

<div class="row">
<div class="col-md-6">
<div class="card">
  <div class="card-body">
    This is some text within a card block.
  </div>
</div>
</div>
<div class="col-md-6">
<div class="card">
  <div class="card-body">
    This is some text within a card block. This is some text within a card block.
  </div>
</div>
</div>
</div>

Сетка по идее выводит 2 card панели в два ряда.
Проблема в том что если содержимое одной панели будет больше другой то они не красиво смотрятся одна выше другой, слышал что на новой сетке bootstrap можно это дело исправить. Подскажите пожалуйста как?
Заранее спасибо!

Comments

[Ярослав Иванов]

делать ручками на html/css

[Егор Живагин]

На flex-ах это не исправляется. Может, bootstrap знает какой-нибудь хитрый хак, но я пока об этом не слышал

Answer 1

[Stacy None]

Проблему решил сам...

.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-'] {
     margin:-.2px; 
}