Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-10-31 09:06:01
original
510 Les gens l'ont consulté

Why Are My Bootstrap xs Columns Wrapping Instead of Stacking Below 360px?

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!