gleiche Höhe zu Spalten bootstrap4

Question

Ich benutze den Bootstrap 4 und wollte wissen, wie ich alle Spalten der gleichen Höhe verlassen? Wenn möglich, ohne flexbox zu verwenden, um mit älteren Browsern kompatibel zu sein (bah!).

Danke

Answer 1

Hier ist, was Sie tun, wenn Sie Flexbox

verwenden möchten

Die 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; 
} 

Die 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> 

Quelle (https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height)

Answer 2

die ersten beiden Lösungen von this Antwort verwenden. Bei der dritten Lösung handelt es sich um eine Flexbox, aber Sie möchten das nicht.

Falls Link hier nicht funktioniert, ist erste Lösung: (Mit Vorsicht)

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

Lösung 2: (Tabellen)

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

Answer 3

Wollen Sie die Inhalt der c die gleiche Höhe der Säule? Bootstrap 4's equal height cards kann dafür verwendet werden. Verwendet display:table und display:table-cell, wenn Flexbox nicht aktiviert ist .

UPDATE

Nun, da Bootstrap 4 (alpha 6) Flexbox standardmäßig ist, sind die Spalten immer gleich hoch: http://www.codeply.com/go/m20UAOFw79