Stasy11
@Stasy11
The best epta

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

Добрый день!
Нужна помощь с новой сеткой 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 можно это дело исправить. Подскажите пожалуйста как?
Заранее спасибо!
  • Вопрос задан
  • 2657 просмотров
Решения вопроса 1
Stasy11
@Stasy11 Автор вопроса
The best epta
Проблему решил сам...
.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; 
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы