L'égalité de la hauteur des colonnes avec Bootstrap 3 et flexbox
Je travaille avec Bootstrap 3 (ne peut malheureusement pas changer de Bootstrap 4) et j'ai besoin pour atteindre la même hauteur de colonnes effet comme dans l'image:
J'ai réussi à le faire fonctionner en utilisant la position absolue et @media screen pour corriger la taille des images et le rembourrage (zones jaunes), mais je crois qu'il y a de mieux pour le résoudre.
J'ai trouvé agréable de travailler code ici, mais l'ajout de l'image sur le dessus détruit la conception de l'image va dans la colonne supplémentaire et s'étire tout le contenu (ici). Ajouter display:block me ramène à l'orignal problème - colonnes de hauteur différente.
J'en suis certain, il y a un peu de ménage et de façon spirituelle pour le faire fonctionner!
EDIT:
Pour l'instant j'ai une ligne principale (cadre vert dans l'image ci-dessous) avec 3 colonnes en elle. Que faire si je fais 3 lignes au lieu (cadres rouges) et s'appliquent de façon égale hauteur seulement vers le milieu du contenu? Il serait bien travailler sur des grands écrans, mais sur de petits écrans lors de la colonne prend toute la largeur de l'écran, il allait se retrouver avec 3 photos l'une sous l'autre, trois description des pièces de l'un sous l'autre et de trois boutons, l'un sous l'autre, certainement pas ce que je veux! Est-il possible de réorganiser l'affichage des colonnes dans un tel cas, donc, je voudrais obtenir 3x image-description-bouton?
edit2: extrait ajouté
CSS:
html,body {
height:100%;
}
.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;
}
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
width:100%;
}HTML:
<header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</header>
<body>
<div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-xs-4">
<div class="well">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
</div>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/200x100">
<div class="well">
Duis pharetra varius quam sit amet vulputate.
</div>
</div>
<div class="col-xs-4">
<div class="well">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi.
</div>
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
</body>Vous devez vous connecter pour publier un commentaire.
Je pense que vous devez continuer d'étendre l'application de flexbox vers le bas dans les enfants.
Noter, cependant, que les images peuvent mal réagir à être un natif flex-enfant. Habillage de l'image dans une div qui résout le problème.
CSS:
HTML:
Codepen Démo
Il n'y a pas d'autre moyen de le faire à la même hauteur en CSS. Je veux dire que dynamique (sans fixer une hauteur spécifique).
Si vous modifiez l'affichage flex pour afficher le bloc. Il ne fonctionnera pas.
Option: Javascript. Obtenir la hauteur de 3 flex-enfants et de les comparer à l'aide des Mathématiques.max(); Définir le numéro de retour (flex-enfants.
CSS:
HTML:
De substituer bootstrap style pour le contenu spécifique.