Pourquoi ma colonne Bootstrap XS s'enroule-t-elle incorrectement sur des tailles d'écran extrêmement petites ?

Résolution du problème d'enveloppement de la colonne Bootstrap XS

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 :

• [La grille d'amorçage se brise dans la plus petite taille](https://stackoverflow.com/questions/21023320/twitter-bootstrap-3-grid-breaks-in -plus petite taille)

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!