Comment créer un système de grille à 7 colonnes dans Bootstrap ?

Obtenir 7 colonnes égales dans Bootstrap

Le défi

Atteindre 7 colonnes égales dans Bootstrap peut être un défi, étant donné son système de colonnes par défaut de 12 colonnes. L'extrait de code suivant montre une tentative de création de 5 colonnes égales à l'aide des classes de colonnes intégrées de Bootstrap :

<code class="html"><div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div></code>

Cependant, cela entraîne seulement 5 colonnes au lieu des 7 souhaitées.

Personnalisation Largeurs de colonnes

Pour surmonter cette limitation, il est nécessaire de remplacer les largeurs de colonnes par défaut à l'aide de requêtes CSS3 @media. La personnalisation de la propriété width des colonnes en fonction du nombre de colonnes souhaité permettra d'obtenir l'effet souhaité.

Implémentation du code

Le code suivant montre comment créer un système de grille à 7 colonnes dans Bootstrap :

<code class="html"><div class="container">
  <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>
</div></code>

La classe à sept colonnes est ajoutée à la ligne extérieure pour la distinguer d'une ligne Bootstrap standard.

Un CSS personnalisé est ensuite utilisé pour déterminer la largeur de chaque colonne :

<code class="css">@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}</code>

La valeur de largeur de 14,285714285714285714285714285714% est obtenue en divisant 100% par 7 (le nombre de colonnes) et en multipliant par le numéro de colonne (1 dans ce cas). Ce calcul garantit que toutes les colonnes ont une largeur égale.

En combinant du CSS personnalisé et la classe à sept colonnes, vous pouvez créer un système de grille flexible avec 7 colonnes égales qui s'adaptent aux différentes tailles d'écran.

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!