Comment résoudre le problème des colonnes arbitraires dans le système de grille Bootstrap 4.5 ?

Cet article vous présentera comment le système de grille Bootstrap 4.5 résout le problème des colonnes arbitraires. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel de base Bootstrap"

Questions1.

Le système de grille dans bootstrap3 est approximativement : 12 grilles unitaires par ligne dans le conteneur. Vous pouvez librement définir les colonnes en fonction de la situation réelle. Comme le montre la figure ci-dessous, la première ligne est divisée de manière égale en. 12 colonnes. La deuxième ligne n'est pas divisée également en 2 colonnes (la somme du nombre de cellules dans les deux colonnes est de 12), la troisième ligne est divisée également en 3 colonnes et la quatrième ligne est divisée également en 2 colonnes.

Bien entendu, selon les besoins, vous pouvez également diviser une ligne à parts égales en 4 colonnes (chaque colonne occupe 3 grilles) ou 6 colonnes (chaque colonne occupe 2 grilles).
La question est de savoir si je veux le diviser également en 5 ou 7 ou 8 ou 9 colonnes, etc. . . ce qu'il faut faire. Le problème ici est de répartir équitablement les largeurs de colonnes afin que chaque colonne ait la même largeur.
Bien sûr, pour les problèmes ci-dessus, vous ne pouvez pas utiliser le système de grille de bootstrap, personnaliser la disposition flottante et définir le pourcentage de largeur de chaque colonne. Cela peut également résoudre des problèmes complexes, mais je ne veux pas étudier de manière aussi basique. problèmes, je veux juste utiliser le taux cadre est élevé au plus haut niveau.
Sur la base des questions ci-dessus, j'essaie de trouver la réponse dans bootstrap4.

2. bootstrap4

Pour des détails techniques plus complets, veuillez vous référer à la documentation officielle

Adresse de référence : https : //getbootstrap.com/docs/4.5/

1. Conteneur de mise en page réactif

En prenant .container-lg comme exemple, lorsque la largeur de l'écran est inférieure. supérieur à 960px, le conteneur occupera la largeur de l'écran et s'affichera en plein écran, l'effet est le même que .container-fluid.

2. Le système de grille

bootstrap4 est plus flexible et gratuit, et peut facilement résoudre les goulots d'étranglement rencontrés dans le problème. Le système de grille de bootstrap4 hérite de la majeure partie du contenu de la version précédente, tout en apportant de nombreuses optimisations. Voici un exemple de 5 colonnes de même largeur dans une rangée :

<p>
  </p><p>
    </p><p>.col</p>
    <p>.col</p>
    <p>.col</p>
    <p>.col</p>
    <p>.col</p>

Résultats d'exécution :

bootstrap4 calculera chaque colonne en fonction du nombre de colonnes dans la ligne (jusqu'à 12) Le pourcentage de largeurs de colonnes est divisé de manière égale, ce qui signifie que tout le nombre possible de colonnes jusqu'à 12 inclus peut apparaître dans une ligne. Le col qui dépasse 12 parties entrera automatiquement dans la ligne suivante et divisera la largeur de la ligne suivante de manière égale. Comme le montre l'image ci-dessous

Que dois-je faire si je veux avoir automatiquement 5 colonnes par ligne ?

Plusieurs lignes de largeur égale

Créez des colonnes de même largeur s'étendant sur plusieurs lignes en insérant un .w-100 à l'endroit où vous souhaitez que les colonnes soient renvoyées dans une nouvelle ligne.

<p>
  </p><p>
    </p><p>.col</p>
    <p>.col</p>
    <p>.col</p>
    <p>.col</p>
    <p>.col</p>
    

    
.col
        
.col
    
.col
    
.col
    
.col
    

    
.col
        
.col
    
.col
    
.col
    
.col

Affichez les résultats

Par <p class="w-100"></p>, forcez un saut de ligne, afin que 12 colonnes ne soient pas encombrées.

De plus : bootstrap4 possède de nombreuses classes d'outils prédéfinies, très pratiques à utiliser https://getbootstrap.com/docs/4.5/utilities/

Pour plus de connaissances liées à la programmation , veuillez visiter : Site Web d'apprentissage de la programmation ! !

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!