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

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

Col-lg- pratique de Twitter Bootstrap Les classes push et col-lg-pull offrent la flexibilité nécessaire pour manipuler l'ordre des colonnes sur des écrans plus grands (ordinateur de bureau ou ordinateur portable).

Comprendre la syntaxe

La syntaxe de ces classes est :

• col-vp-push-x : pousse le colonne x nombre de colonnes à droite, à partir de sa position normale sur les fenêtres supérieures ou égales à vp.
• col-vp-pull-x : tire la colonne x nombre de colonnes vers la gauche, en partant de sa position normale sur les fenêtres supérieures ou égales à vp.

Ici, vp peut être xs, sm, md ou lg, tandis que x va de 1 à 12.

Exemples de scénarios

Considérons l'exemple suivant où vous souhaitez afficher une grille de 3 colonnes : 2 de longueur 5 et 1 de longueur 2.

• Vue Bureau (≥ lg) : Affichage [5] [5] [2] horizontalement.
• Vue mobile (≤ sm) : Affichage [5] (seconde) [5] (premier) [2] verticalement.

Code :

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'></div>
  <div class='col-lg-5 col-lg-pull-5'></div>
  <div class='col-lg-2'></div>
</div>

Explication :

• Le premier col-lg -5 L'élément est poussé de 5 colonnes vers la droite, il démarrera donc 5 colonnes après sa normale position.
• Le deuxième élément col-lg-5 est tiré 5 colonnes vers la gauche, il commencera donc 5 colonnes avant sa position normale.
• L'élément col-lg-2 reste dans son ordre par défaut.

Remarque : Pour garantir une fonctionnalité correcte, assurez-vous que l'ordre des éléments dans le balisage correspond à celui souhaité commandez sur les écrans plus grands.

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!