Le système de grille Bootstrap peut-il créer 7 colonnes égales ?

Système de grille de Bootstrap avec 7 colonnes égales

Lorsque vous travaillez avec Bootstrap, il peut être difficile de créer des mises en page avec un nombre impair de colonnes. Le système de grille Bootstrap adhère généralement aux nombres pairs, laissant beaucoup se demander s'il est possible d'avoir 7 colonnes égales.

La réponse réside dans le remplacement des largeurs de colonnes à l'aide de requêtes CSS3 @media. Voici comment y parvenir :

1. Déclarez la classe conteneur : Commencez par créer une classe conteneur dans laquelle résideront les 7 colonnes. Par exemple :

   <code class="html"><div class="container">
    ...
   </div></code>

2. Définissez la structure des lignes et des colonnes : Dans le conteneur, définissez une ligne et 7 colonnes avec la classe souhaitée :

   <code class="html"><div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
   </div></code>

3. Calculer la largeur de colonne : Déterminez la largeur de colonne appropriée en fonction du nombre de colonnes (dans ce cas, 7). La formule pour la largeur est la suivante :

   Width = 100% / Number of Columns

   Donc, pour 7 colonnes, la largeur est de 100 % / 7 ≈ 14,2857 %.

4. Remplacer la largeur de la colonne Utilisation des requêtes multimédias : Pour remplacer la largeur de colonne par défaut, utilisez des requêtes multimédias CSS pour cibler les points d'arrêt spécifiques. Par exemple :

   <code class="css">@media (min-width: 992px) {
     .seven-cols .col-md-1 {
    width: 14.285714285714285714285714285714%;
     }
   }</code>

En incluant ces requêtes multimédias, vous pouvez vous assurer que la largeur des colonnes s'ajuste en fonction de la taille de l'écran.

Démo de travail :

Visitez cette démo en ligne pour voir les 7 colonnes égales en action :
[Lien vers la démo]

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!