Pouvez-vous créer une mise en page à 7 colonnes avec Bootstrap ?

Est-il possible de créer 7 colonnes égales à l'aide de Bootstrap ?

Lorsque vous travaillez avec Bootstrap, il est courant de créer des colonnes paires pour une mise en page équilibrée. Cependant, vous pouvez rencontrer des situations où vous avez besoin d'un nombre impair de colonnes, comme 7.

Remplacement de la largeur des colonnes avec CSS

Bien que Bootstrap ne fournisse pas nativement un système à 7 colonnes, il est Il est possible d'y parvenir en remplaçant la largeur des colonnes à l'aide de CSS.

<code class="css">@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%;
  }
}</code>

Cette requête multimédia définit la largeur de toutes les colonnes avec la classe col-md-1 (ainsi que col-sm-1 et col-lg-1 ;) à 14,285714285714285714285714285714 % pour les écrans de taille moyenne ou plus. Cela garantit une répartition égale des colonnes.

Utilisation d'une classe parent

Pour contenir les 7 colonnes, vous aurez besoin d'un élément parent avec la classe sept-cols pour appliquer les remplacements.

<code class="html"><div class="container">
  <div class="row seven-cols">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
  </div>
</div></code>

Conclusion

En remplaçant les largeurs de colonnes à l'aide de CSS et en utilisant un élément parent, vous pouvez créer une mise en page à 7 colonnes à l'aide de Bootstrap. N'oubliez pas que cette approche nécessite du CSS supplémentaire et qu'il est toujours préférable d'adhérer au système de grille Bootstrap natif lorsque cela est possible.

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!