Je ne peux pas obtenir mes colonnes Bootstrap se développer avec la même hauteur

Question

D'abord, je sais que cette question a été posée plusieurs fois, et j'ai essayé toutes les solutions que j'ai trouvées. C'est pourquoi je le demande à nouveau.

La grille Bootstrap avec laquelle je travaille a une largeur maximale de 1000px. A cette taille, les trois colonnes ont parfaitement la même hauteur. Le problème est quand l'écran devient plus petit et duo au nombre différent de caractères qu'ils ont, ils ne développent pas avec la même taille.

Qu'ai-je déjà essayé? affichage: table; flexbox; row-eq-height; matchheight.js. Codez: https://codepen.io/anon/pen/qPQjjp essayez de redimensionner la fenêtre du navigateur et vous pouvez voir une colonne devient plus grande que l'autre en fonction de la taille de la fenêtre.

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

Les colonnes supplémentaires « col-sm-12 » est un truc que j'ai appris ici afin de donner un espace blanc entre les trois colonnes principales.

CSS

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

Answer 1

Un gars du forum Dreamwaver sur adobe.com, m'a aidé à cela. C'est littéralement la seule solution qui a fonctionné.

Dans mon cas, c'est le CSS que je devrais utiliser:

.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; 

}