Quand j'étudiais le document d'amorçage aujourd'hui, j'ai vu le tri des colonnes et j'ai découvert que le flottement pouvait toujours être utilisé de cette manière, alors j'ai cherché le code source ~
Le tri des colonnes modifie en fait la direction de la colonne, c'est-à-dire la modification du flottement gauche et droit et la définition de la distance de flottement. Dans le système de grille, cela peut être réalisé avec .col-md-push-* et .col-md-pull-*. Regardez d'abord le diagramme d'effet
Par défaut, col-md-9 est à gauche et col-md-3 à droite. Si vous souhaitez échanger des positions, vous devez déplacer la colonne col-md-9 vers la droite de 3 colonnes, c'est-à-dire , poussez le décalage de 3 colonnes, utilisez col-md-push-3 pour le style ; et col-md-3 doit se déplacer vers la gauche, c'est-à-dire tirez le décalage de 9 colonnes, utilisez col-md-pull-9 pour le style. Les lecteurs peuvent demander, pourquoi ne pouvez-vous pas utiliser les flottants gauche et droit ? En effet, toutes les colonnes sont flottantes à gauche par défaut. Si vous souhaitez utiliser le flottement gauche-droite, vous ne savez pas combien de colonnes doivent modifier le style flottant gauche-droite. Par conséquent, sur la base de l'unification du flottement gauche, l'auteur réalise l'affichage du positionnement en définissant les valeurs de gauche et de droite. Le code ressemble à ceci :
// code source 1125 lignes
// D'autres sont identiques, le réglage de pull est similaire, la seule différence est la différence entre right et left
.col-md-push-0 { left: 0;}
.col-md-pull-12 { right: 100%;}
.col-md-pull-11 { right: 91.66666666666666%;}
.col-md-pull-10 { right: 83.33333333333334%;}
.col-md-pull-9 { right: 75%;}
.col-md-pull-8 { right: 66.66666666666666%;}
.col-md-pull-7 { right: 58.333333333333336%;}
.col-md-pull-6 { right: 50%;}
.col-md-pull-5 { right: 41.66666666666667%;}
.col-md-pull-4 { right: 33.33333333333333%;}
.col-md-pull-3 { right: 25%;}
.col-md-pull-2 { right: 16.666666666666664%;}
.col-md-pull-1 { right: 8.333333333333332%;}
.col-md-pull-0 { right: 0;}
.col-md-push-12 { left: 100%;}// D'autres sont identiques, le réglage de pull est similaire, la seule différence est la différence entre right et left
.col-md-push-0 { left: 0;}