Ich kann meine Bootstrap-Spalten nicht mit der gleichen Höhe erweitern

Question

Erstens, ich weiß, dass diese Frage mehrmals gestellt wurde, und ich habe alle gefundenen Lösungen ausprobiert. Deshalb frage ich es nochmal.

Das Bootstrap-Gitter, mit dem ich arbeite, hat max-Breite: 1000px. Bei dieser Größe sind die drei Säulen genau gleich hoch. Das Problem ist, wenn der Bildschirm kleiner wird und sich an die unterschiedliche Anzahl von Zeichen anpasst, die sie haben, sie erweitern sich nicht mit der gleichen Höhe.

Was habe ich bisher versucht? Anzeige: Tabelle; Flexbox; Reihe-EQ-Höhe; matchheight.js.

Codepen: https://codepen.io/anon/pen/qPQjjp versuchen Sie die Größe des Browserfensters und Sie können sehen, eine Spalte wird größer als die andere abhängig von der Fenstergröße.

<div class="feature1"> 
     <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div> 
     <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div> 
     <div class="col-sm-4"><div class="col-sm-12 well feature1-box">Text goes here</div></div> 
     </div> 

die zusätzlichen Spalten „col-sm-12“ ist ein Trick, den ich hier, um einen Leerraum zwischen den drei Hauptsäulen geben gelernt.

CSS

.feature1 { 
    margin-left: auto; 
    margin-right: auto; 
    left: 0; 
    right: 0; 
    max-width: 1000px; 
} 

Answer 1

Ein Mann aus dem Dreamwaver Forum auf adobe.com, half mir dies mit. Dies ist buchstäblich die einzige Lösung, die funktioniert hat.

In meinem Fall, das ist die CSS sollte ich verwenden:

.feature1 { 

display: flex; 

flex-wrap: wrap; 

margin-left: auto; 

margin-right: auto; 

max-width: 1000px; 

} 

.col-sm-4 { 

display: flex; 

} 

.well { 

flex: 1; 

} 

.well h3 { 

text-align: center; 

} 

.well figure { 

text-align: center; 

}