Le système de grille de Bootstrap peut rencontrer un problème où la dernière colonne de taille XS s'enroule incorrectement lorsque la largeur de l'écran devient exceptionnellement petite. Malgré la configuration des colonnes pour qu'elles totalisent 12, le comportement d'alignement peut ne pas respecter les attentes.
Par exemple, considérons le code suivant :
<code class="html"><div class="container"> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-1 col-xs-offset-8"></div> <div class="col-xs-1"></div> </div> </div></code>
Habituellement, lors de la réduction de la taille de l'écran, le la dernière colonne doit s'empiler verticalement à la fin de l'écran. Cependant, à mesure que l'écran diminue au-delà d'un seuil critique, la colonne revient de manière inattendue vers le début.
Certains utilisateurs ont envisagé d'ajouter du code CSS pour spécifier une largeur minimale pour le conteneur. Cependant, une solution alternative existe dans Bootstrap.
Explication du problème
Ce comportement provient d'un problème connu, documenté dans GitHub (https://github.com/twbs /bootstrap/issues/13221). Pour des largeurs d'écran inférieures à 360 px, les colonnes .col-xs-1 commencent à s'enrouler car la largeur de la colonne est définie sur 8,333333 %, tandis que le remplissage de chaque côté s'élève à 15 px. Cette asymétrie provoque un écart, conduisant le navigateur à empiler les colonnes.
Éviter le problème
Pour éviter le retour à la ligne, évitez d'utiliser .col-xs-1 sur écrans extrêmement petits. De plus, évaluez si l’écran est susceptible d’être redimensionné de manière réaliste en dessous de 360 pixels. Dans la plupart des scénarios, cela n'est pas fréquent.
Remarque : Dans Bootstrap 4, .col-xs-1 a été remplacé par .col-1.
Problèmes connexes :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!