Pourquoi les colonnes Bootstrap ne s'enroulent-elles pas correctement à la taille XS ?

Emballage de colonnes Bootstrap dans la plus petite taille (XS)

Bootstrap, un framework frontal populaire, fournit un système de grille réactif qui permet aux développeurs de créer des mises en page flexibles qui s'adapter à différentes tailles d'écran. Cependant, un problème courant rencontré lors de l'utilisation du point d'arrêt de plus petite taille (XS) est que les colonnes ne s'ajustent pas comme prévu lorsque la largeur de l'écran diminue au-delà d'une certaine limite.

Ce problème se produit car les colonnes avec une largeur combinée de 12 (par exemple,

) peut ne pas être renvoyé correctement en raison d'un remplissage minimal sur chaque colonne. Les colonnes .col-xs-1 de Bootstrap ont un remplissage de 15 px, ce qui peut les amener à s'enrouler prématurément sur des écrans étroits.

Problème connu :

Ce problème est reconnu dans le dépôt Bootstrap GitHub : https://github.com/twbs/bootstrap/issues/13221.

Solution :

Pour éviter ce problème, tenez compte des suggestions suivantes :

• N'utilisez pas de colonnes .col-xs-1 sur de très petits écrans : Utilisez plutôt colonnes plus grandes telles que .col-xs-2 ou .col-xs-3.
• Considérez la taille de l'écran : Déterminez si l'écran sera redimensionné de manière réaliste en dessous de 360 px. Dans la plupart des cas, cela est peu probable.

Remarque pour Bootstrap 4 :

Dans Bootstrap 4, .col-xs-1 a été renommé . col-1. Le même problème peut se produire avec les colonnes .col-1 sur des écrans de moins de 360 ​​pixels de large.

Problème connexe :

Les utilisateurs de Bootstrap ont également signalé un problème similaire avec la grille. rupture à la plus petite taille : https://stackoverflow.com/questions/29385993/bootstrap-grid-breaks-in-smallest-size

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!