Je débute sous Bootstrap et je me heurte à un petit souci. Je fais une page "catalogue" listant différents produits avec 1/ photo du produit, 2/ caractéristiques principales et 3/lien vers la page produit détaillant le produit.
Pour avoir 3 produits sur chaque ligne sur un écran large, 2 produits par ligne sur une tablette et 1 seul par ligne sur un smartphone de petite résolution, j'ai utilisé le code suivant:
Mon problème est que la hauteur de chaque bloc <li> n'est pas forcément la même et que du coup, cela peut générer un problème d'affichage sur les écrans de tablette ("sm") ou de desktop ("md")... Exemple concret:
Comme vous pouvez voir, le premier item est plus haut que le 2ème et le 3ème. Du coup le 4ème et le 5ème viennent s'intercaler en dessous du 2nd et du 3ème vu qu'il reste un peu de place, au lieu d'aller complètement à la ligne afin d'avoir les items 4, 5, et 6 sur la même ligne. Est-ce que quelqu'un verrait comment corriger cela?
Oui, j'ai vu que le problème vient du fait que j'ai une ligne de plus de texte dans la description du premier produit mais j'aimerais que justement tout se mette à la ligne quelque soit le nombre de lignes de description de l'article... quelle que soit donc la hauteur des blocs li.
En ce qui concerne la structure de base de mes li, la voici:
J'ai tenté le display:table et le display:table-cell mais cela ne fonctionnait pas.
Le forçage de la hauteur, ça fonctionne mais cela me dérange de mettre une hauteur aux blocs parce que je souhaite que cela s'adapte quelle que soit la hauteur.
Du coup j'ai trouvé une solution dans la doc de bootstrap. Il y a en effet une classe déjà toute faite pour cela: .clearfix.
Pour les écrans entre 768 et 992 pixels, j'ajoute également tous les 2 li un li du type:
<li class="clearfix visible-sm-block"></li>
Mais je ne suis pas complètement satisfait de cette solution non plus donc j'ai utilisé des media queries et le clear:both pour faire en sorte que selon la taille de l'écran, on revienne automatiquement à la ligne après 2 ou 3 li:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
ul#catalogue li:nth-child(2n+1) {
clear: both;
}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
ul#catalogue li:nth-child(3n+1) {
clear: both;
}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
ul#catalogue li:nth-child(3n+1) {
clear: both;
}
}
Je voulais plutôt que d'utiiser un nth-child(3n+1) utiliser plutôt nth-child(3n)::after mais je ne comprends pas pourquoi cette écriture ne fonctionne pas alors j'ai bricolé à la place un nth-child(3n+1)
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE
Le CSS ça peut craindre -->Conférence CSS3.CREATE