Comment réorganiser les colonnes Bootstrap 3 à l'aide de « col-lg-push » et « col-lg-pull » ?

Réorganiser l'ordre des colonnes avec col-lg-push et col-lg-pull dans Twitter Bootstrap 3

L'ordre des colonnes dans Bootstrap 3 permet aux développeurs pour ajuster la position des colonnes dans les lignes pour différentes tailles d'écran. Les classes col-lg-push et col-lg-pull sont spécialement conçues à cet effet, permettant de contrôler la disposition des colonnes sur les appareils à grand écran (ordinateurs de bureau et portables).

Pour personnaliser l'ordre des colonnes, vous besoin de :

1. Définir l'ordre en HTML :Modifier l'ordre des colonnes dans votre balisage HTML. Par exemple, si vous souhaitez que la deuxième colonne à 5 grilles apparaisse en premier, placez son contenu avant la première colonne à 5 grilles dans votre code.
2. Utilisez la classe push : Ajoutez la col- classe lg-push-5 vers la colonne que vous souhaitez déplacer vers la droite. Cette classe poussera la colonne de 5 colonnes par rapport à sa position d'origine.
3. Utilisez la classe pull : Ajoutez la classe col-lg-pull-5 à la colonne que vous souhaitez déplacer vers la gauche . Cette classe tirera la colonne de 5 colonnes vers la gauche.

Exemple :

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

Explication :

Dans cet exemple, la deuxième colonne est poussée vers la droite de 5 colonnes à l'aide de col-lg-push-5, la faisant apparaître après la Troisième colonne sur grands écrans. La première colonne est tirée vers la gauche de 5 colonnes à l'aide de col-lg-pull-5, l'amenant avant la troisième colonne. Cela crée la mise en page souhaitée : [5] (deuxième), [5] (premier), [2] sur mobile et [5] [5] [2] sur ordinateur.

Comprendre Pull et Push :

• Pull : Déplace une colonne vers le à gauche.
• Pousser : Déplace une colonne vers la droite.

Remarque :

• Le Les classes push et pull n'affectent que l'ordre des colonnes sur des tailles d'écran spécifiées (dans ce cas, de grands écrans).
• Les classes ont aucun effet sur les tailles d'écran plus petites, car Bootstrap donne la priorité à la mise en page mobile par défaut.

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!