Pourquoi mes colonnes Bootstrap xs s'enroulent-elles au lieu de s'empiler en dessous de 360 ​​​​px ?

Bootstrap : emballage inattendu des colonnes xs

Le framework Bootstrap simplifie la conception réactive en fournissant des utilitaires permettant de créer des mises en page flexibles et efficaces. Cependant, les utilisateurs rencontrent parfois des problèmes inattendus lorsque les colonnes ne se comportent pas comme prévu, en particulier dans la taille très petite (xs).

Problème : les colonnes xs sont renvoyées à la ligne au lieu de s'empiler

Normalement, lorsqu'une ligne est les colonnes totalisent 12, elles doivent s'empiler verticalement à mesure que la largeur de l'écran diminue. Cependant, sur des écrans plus petits, une colonne peut s'enrouler de manière inattendue vers le début de l'écran au lieu de la fin.

Cause : incompatibilité du navigateur

Ce comportement est dû à un problème connu dans Bootstrap. Dans les largeurs d'écran inférieures à 360 px, les colonnes d'une largeur de 1 % (col-xs-1) peuvent ne pas s'insérer correctement dans le conteneur. Malgré la spécification d'une largeur de 1 %, le remplissage de 15 px des deux côtés élargit effectivement la colonne, provoquant une inadéquation avec le moteur de mise en page du navigateur.

Solution : évitez col-xs-1 pour les petits écrans

Pour éviter ce problème, pensez à ne pas utiliser col-xs-1 sur des écrans inférieurs à 360 px. Déterminez si votre application anticipe de manière réaliste que les utilisateurs redimensionneront l'écran en dessous de cette limite.

Remarque pour Bootstrap 4

Dans Bootstrap 4, la classe col-xs-1 a été renommée col-1. Le problème décrit ci-dessus s'applique toujours à la col-1 dans Bootstrap 4.

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!