равная высота столбцам bootstrap4

Question

Я использую bootstrap 4 и хочу знать, как я оставлю все столбцы одинаковой высоты? Если возможно, не используя flexbox для совместимости со старым браузером (бах!).

Спасибо

Answer 1

Вот что вы делаете , если вы хотите использовать Flexbox

CSS-

.row.is-flex { 
    display: flex; 
    flex-wrap: wrap; 
} 
.row.is-flex > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
} 

/* 
* And with max cross-browser enabled. 
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing. 
*/ 
.row.is-flex { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

.row.is-flex > [class*='col-'] { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
} 

HTML-

<div class="row is-flex"> 
    <div class="col-sm-4">...</div> 
    <div class="col-sm-4">...</div> 
    <div class="col-sm-4">...</div> 
</div> 

источник (https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height)

Answer 2

Используйте первые два решения this ответа. Третье решение включает flexbox, но, как вы упомянули, вы этого не хотите.

В случае ссылка не работает, вот первое решение: (используйте с осторожностью)

.row { 
    overflow:hidden; 
} 
[class*="col-"]{ 
    margin-bottom:-99999px; 
    padding-botton:99999px; 
} 

Решение 2: (таблицы)

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

Answer 3

Вы хотите получить c ольны должны быть равны по высоте? Для этого можно использовать Bootstrap 4's equal height cards. Используется display:table и display:table-cell, когда flexbox не включен .

UPDATE

Теперь Bootstrap 4 (альфа-6) является Flexbox по умолчанию столбцы всегда равны по высоте: http://www.codeply.com/go/m20UAOFw79