Bootstrap Grid - Medium Devices

Bootstrap Grille Exemple: Devices Medium

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é un 25%/75% divisée:

Mais sur les appareils moyen de la conception peut - être mieux comme un 50%/50% divisé.

Astuce: dispositifs moyennes sont définis comme ayant une largeur d'écran de 992 pixels à 1199 pixels.

Pour les appareils moyens , nous allons utiliser les .col-md-* classes.

Maintenant, nous allons ajouter la largeur des colonnes pour les appareils de taille:

Maintenant Bootstrap va dire "à la petite taille, regardez les classes avec -sm- en eux et utiliser ceux -ci . A la taille moyenne, regardez les classes avec -md- en eux et utiliser ces".

L'exemple suivant se traduira par un 25%/75% divisée sur les petits appareils et 50%/50% divisée sur les appareils moyennes (et grandes). Sur les petits appareils supplémentaires, il sera automatiquement pile (100%):

Utilisation Seulement Medium

Dans l'exemple ci - dessous, nous précisons que le .col-md-6 classe (sans .col-sm-* ). Cela signifie que les appareils moyens et grands se partageront 50%/50% - parce que la classe échelles vers le haut. Cependant, pour les petits appareils, il va empiler verticalement (largeur de 100%):

Le chapitre suivant montre comment ajouter un pour cent de partage différent pour les grands appareils.