Bonjour,
J'utilise bootstrap v3, je souhaite afficher une galerie d'image.
4 images par ligne, pour simplifier l'exemple ici cela donne avec le système de grille bootstrap : col-md-3 , j'utilise aussi leur classe thumbnail et img-responsive.
Le problème est :
1) je ne connais pas la hauteur de l'image a l'avance
2) le texte peut etre de différente longueur
Pour résumer : je ne connais pas et je ne peux pas définir une hauteur pour la div. Et l'ensemble dois rester responsive.
Le problème est que bootstrap utilise un float:left pour son système de grille, et comme vous le savez certainement float:left est vraiment mauvais pour faire un alignement vertical.
D'habitude pour corriger ce problème de float j'utilise :
sauf que dans le cas de la grille de bootstrap cela ne fonctionne pas ( je ne sais pas pourquoi ).
J'ai donc chercher sur stackoverflow et je suis tombé sur des gens qui conseil d'utilise flex :
mais malheureusement cela ne change rien.
J'ai passé l'après midi la dessus et la j'avoue être a cours d'idée.
Je vous propose le codepen suivant avec le code html complet, que j'ai simplifié au maximum pour des raisons de lisibilité. Vous verrez immédiatement de quel problème d'alignement je parle. En effet a la 5 ème image je voudrais qu'elle se mets complétement a gauche et ainsi de suite.
https://codepen.io/stellvia/pen/aeJXzQ
Merci d'avance pour la personne qui saurait m'éclairer.
Modifié par stellvia (30 Jul 2019 - 15:04)
J'utilise bootstrap v3, je souhaite afficher une galerie d'image.
4 images par ligne, pour simplifier l'exemple ici cela donne avec le système de grille bootstrap : col-md-3 , j'utilise aussi leur classe thumbnail et img-responsive.
Le problème est :
1) je ne connais pas la hauteur de l'image a l'avance
2) le texte peut etre de différente longueur
Pour résumer : je ne connais pas et je ne peux pas définir une hauteur pour la div. Et l'ensemble dois rester responsive.
Le problème est que bootstrap utilise un float:left pour son système de grille, et comme vous le savez certainement float:left est vraiment mauvais pour faire un alignement vertical.
D'habitude pour corriger ce problème de float j'utilise :
display:inline-blocksauf que dans le cas de la grille de bootstrap cela ne fonctionne pas ( je ne sais pas pourquoi ).
J'ai donc chercher sur stackoverflow et je suis tombé sur des gens qui conseil d'utilise flex :
.vcenter {
display: flex;
align-items: center;
}
et ensuite :
<div class="col-md-3 vcenter ">
mais malheureusement cela ne change rien.
J'ai passé l'après midi la dessus et la j'avoue être a cours d'idée.
Je vous propose le codepen suivant avec le code html complet, que j'ai simplifié au maximum pour des raisons de lisibilité. Vous verrez immédiatement de quel problème d'alignement je parle. En effet a la 5 ème image je voudrais qu'elle se mets complétement a gauche et ainsi de suite.
https://codepen.io/stellvia/pen/aeJXzQ
Merci d'avance pour la personne qui saurait m'éclairer.
Modifié par stellvia (30 Jul 2019 - 15:04)