Bootstrap 4 Grille Moyenne

Exemple de grille moyenne

Dans le chapitre précédent, nous avons présenté un exemple de grille avec des classes pour les petits appareils. Nous avons utilisé deux divs (colonnes) et nous leur avons donné une répartition 25 %/75 % :

Mais sur les appareils moyens, la conception peut être meilleure en tant que répartition 50%/50%.

Pour les appareils moyens, nous utiliserons les .col-md-*classes :

Maintenant, Bootstrap va dire "à la petite taille, regardez les classes avec -sm- et utilisez-les. À la taille moyenne, regardez les classes avec -md- et utilisez-les".

L'exemple suivant entraînera une répartition 25 %/75 % sur les petits appareils et une répartition 50 %/50 % sur les appareils moyens (et grands et très grands). Sur les très petits appareils, il s'empilera automatiquement (100 %) :

Utiliser uniquement le support

Dans l'exemple ci-dessous, nous spécifions uniquement la .col-md-6classe (sans .col-sm-*). Cela signifie que les appareils moyens, grands et très grands se diviseront à 50 %/50 %, car la classe évolue. Cependant, pour les petits et très petits appareils, il s'empilera verticalement (100 % de largeur) :

Colonnes de disposition automatique

Dans Bootstrap 4, il existe un moyen simple de créer des colonnes de largeur égale pour tous les appareils : il suffit de supprimer le nombre de .col-md-*et d'utiliser uniquement la .col-mdclasse sur un nombre spécifié d' éléments col . Bootstrap reconnaîtra le nombre de colonnes et chaque colonne aura la même largeur.

Si la taille de l'écran est inférieure à 768px , les colonnes s'empileront horizontalement :

Le chapitre suivant montre comment ajouter un pourcentage de répartition différent pour les gros appareils.