Comment obtenir 7 colonnes bootstrap égales ?

Réalisation de 7 colonnes Bootstrap égales

Dans Bootstrap, créer une disposition de grille avec des colonnes égales est simple à l'aide de classes prédéfinies. Cependant, lorsque vous tentez de créer sept colonnes de ce type, les classes par défaut peuvent ne pas suffire.

Pour ce faire, vous devrez utiliser des requêtes CSS3 @media pour remplacer les largeurs de colonne par défaut. Voici une répartition détaillée :

• Modifier les largeurs de colonnes :

  Créer une classe dédiée (sept colonnes) pour le conteneur de lignes et le .col imbriqué -md-1 classes pour chaque colonne. En utilisant cette approche, vous pouvez remplacer les largeurs de colonne par défaut et les personnaliser pour ce scénario spécifique.

• Requêtes média :

  Mettre en œuvre des requêtes @media pour ajuster la largeur des colonnes pour différentes tailles d'écran. Pour les écrans de 768 px et plus, définissez la largeur de la colonne sur 100 %. Pour les écrans de 992 px et plus, calculez la largeur comme suit : (100 % / 7) = 14,285714285714285714285714285714 %. Cette formule garantit que les sept colonnes ont des largeurs égales.

• Démo de travail :

  Une démonstration de code en direct est fournie via jsbin. Cliquez sur « Pleine page » pour afficher la mise en page.

En suivant ces étapes, vous pouvez créer une disposition de grille personnalisée à 7 colonnes dans un conteneur Bootstrap plus large. N'oubliez pas d'ajuster les valeurs CSS si nécessaire en fonction de vos exigences de conception spécifiques.

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!