Comment créer sept colonnes égales dans Bootstrap ?

Réalisation de 7 colonnes Bootstrap égales

Dans Bootstrap, la création de colonnes est simple, mais il n'est pas toujours évident de savoir comment obtenir des configurations de colonnes moins courantes, comme sept colonnes égales.

Remplacement de la largeur des colonnes avec les requêtes multimédias CSS

Pour obtenir sept colonnes égales, nous devons remplacer la largeur par défaut des colonnes de Bootstrap à l'aide du média CSS requêtes. Voici comment :

1. Créez une classe personnalisée, telle que "seven-cols", pour le conteneur de lignes.
2. Utilisez des requêtes multimédias CSS pour définir la largeur des colonnes individuelles dans cette ligne. conteneur.

Code CSS :

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

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

Calcul de la largeur de la colonne :

La largeur est calculée en utilisant la formule :

width = 100% / 7 column-number

Dans ce cas, avec sept colonnes :

width = 100% / 7 = 14.285714285714285714285714285714%

Cela signifie que chaque colonne doit être définie sur 14,285714285714285714285714285714 % du conteneur de ligne parent.

Marquage HTML :

<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>

Démo de travail :

Découvrez la démo de travail sur jsbin pour voir les sept colonnes égales en action :
https://jsbin.com/vuvut/3/edit?css,output

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!