Comment puis-je contrôler l'ordre des colonnes dans Bootstrap 3 à l'aide de « col-lg-push » et « col-lg-pull » ?

Manipulation de l'ordre des colonnes avec col-lg-push et col-lg-pull dans Twitter Bootstrap 3

Dans Twitter Bootstrap 3, le col Les classes -lg-push et col-lg-pull permettent aux développeurs de manipuler l'ordre des colonnes dans une disposition en grille sur le bureau et au-dessus des fenêtres. Cette fonctionnalité est particulièrement utile lors de la création de mises en page réactives qui doivent afficher les colonnes dans un ordre spécifique sur des tailles d'écran particulières.

Comprendre col-lg-push et col-lg-pull

• col-lg-push-x : Cette classe pousse une colonne vers la droite du nombre spécifié de colonnes, déplaçant efficacement sa position vers la droite dans la grille.
• col-lg-pull-x : Cette classe tire une colonne vers la gauche du nombre de colonnes spécifié, en décalant sa position à gauche dans la grille.

Syntaxe et utilisation

Pour utilisez ces classes, ajoutez-les simplement à la classe col-lg-* qui définit la largeur de la colonne. Par exemple, si vous souhaitez pousser une colonne vers la droite de 5 colonnes, vous utiliserez la classe col-lg-5 col-lg-push-5.

Exemple

Considérez le balisage suivant :

<div class="row">
  <div class="col-lg-5 col-lg-push-5">Content B</div>
  <div class="col-lg-5 col-lg-pull-5">Content A</div>
  <div class="col-lg-2">Content C</div>
</div>

Dans les fenêtres d'affichage du bureau (où LG s'applique), le contenu B sera poussé vers le à droite de 5 colonnes, en le plaçant à droite du contenu C. Le contenu A sera tiré vers la gauche de 5 colonnes, le plaçant effectivement à gauche du contenu B. Cela donne la disposition suivante :

[Content B] [Content A] [Content C]

Exception sur les fenêtres mobiles

Il est important de noter que la fonctionnalité push et pull ne s'applique qu'aux fenêtres supérieures ou égales à la taille spécifiée. Par exemple, si vous utilisez col-lg-push-5, la colonne sera uniquement poussée dans les fenêtres du bureau (où lg s'applique). Sur les fenêtres mobiles, les colonnes s'afficheront dans leur ordre par défaut.

Conclusion

Les classes col-lg-push et col-lg-pull offrent un moyen puissant de manipuler l'ordre des colonnes dans les mises en page Bootstrap 3. En comprenant la syntaxe et les directives d'utilisation, les développeurs peuvent créer des mises en page réactives qui s'adaptent à différentes tailles d'écran tout en conservant la hiérarchie visuelle souhaitée.

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!