Pourquoi mes colonnes Bootstrap XS s'enroulent-elles de manière inattendue ?

Bootstrap XS Column Wrapping Malheurs

Vous rencontrez un comportement de colonne inattendu lorsque la largeur de l'écran se réduit à des tailles ultra-petites ? Si c'est le cas, vous n'êtes pas seul. Ce problème se pose avec les classes de colonnes XS de Bootstrap (maintenant col-x dans Bootstrap 4).

Cause :

Le problème vient du fait que même si les colonnes XS ont un définir la largeur, ils ont également un rembourrage des deux côtés. Ce remplissage peut amener la colonne à dépasser sa largeur prévue, entraînant un comportement d'enroulement inattendu lorsque l'écran devient trop étroit.

Solution :

Bootstrap n'a pas actuellement un moyen intégré pour résoudre ce problème, mais une solution courante consiste à éviter d'utiliser col-XS-1 (ou col-1 dans Bootstrap 4) lorsque la largeur de l'écran est inférieure à 360 pixels.

Alternativement, vous Vous pouvez envisager d'utiliser CSS pour définir une largeur minimale pour le conteneur, en garantissant que les colonnes disposent de suffisamment d'espace pour s'afficher correctement, même sur de très petits écrans.

Remarque supplémentaire :

Dans Bootstrap 4, la classe col-XS-1 a été renommée col-1. Cependant, le problème persiste également pour cette classe.

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!