web-dev-qa-db-fra.com

Quelle est la différence entre Push et Offset sous le système de grille?

J'essaie de comprendre la différence entre Push et offset dans les grilles Bootstrap. Par exemple, la seule différence entre les deux lignes ci-dessous est la troisième colonne de chacune. L'une utilise une Push et l'autre utilise un décalage. Cependant, ils sont tous les deux identiques.

<div class="row">
    <div class="col-md-2">
        <h2>Column 1</h2>
        <p>
            This is text for column 1
        </p>
        <p><a class="btn btn-default" href="http://go.Microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2">
        <h2>Column 2</h2>
        <p>This is text for column 2</p>
        <p><a class="btn btn-default" href="http://go.Microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2 col-md-Push-6">
        <h2>Column 3</h2>
        <p>This is text for column 3</p>
        <p><a class="btn btn-default" href="http://go.Microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

<div class="row">
    <div class="col-md-2">
        <h2>Column 1</h2>
        <p>
            This is text for column 1
        </p>
        <p><a class="btn btn-default" href="http://go.Microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2">
        <h2>Column 2</h2>
        <p>This is text for column 2</p>
        <p><a class="btn btn-default" href="http://go.Microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-2 col-md-offset-6">
        <h2>Column 3</h2>
        <p>This is text for column 3</p>
        <p><a class="btn btn-default" href="http://go.Microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>
csstwitter-bootstrapuser-interfacetwitter-bootstrap-3
55
Randy Minder

Comme l'offset utilise margin-left, et Push utilise left:

  • décalage forcera les colonnes voisines à se déplacer
  • Push (and pull) chevauchera les autres colonnes

Voici un exemple visuel: http://www.bootply.com/126557

Dans votre exemple, il n'y a aucune colonne "collisions". La poussée et le décalage sont identiques car les colonnes voisines ne sont pas affectées.

91
Zim

.col-md-offset-*: augmentera la marge gauche de * Des classes

.col-md-Push-*/.col-md-pull-*: changera l'ordre d'apparition des colonnes de la grille par * Des classes. Pull enverra la colonne vers la gauche, tandis que Push l'enverra vers la droite.

6
gustavohenke

Un décalage dans bootstrap décalera le côté gauche de la colonne, le déplaçant ainsi sur ou "décalant" quelque chose vers la droite. Avec le style "offset", vous ne pouvez compenser que les éléments vers la droite. Pour pousse et tire, vous pouvez tirer quelque chose vers la "gauche ou la droite" ou vous pouvez pousser quelque chose à l'opposé de la traction.

1
Ty T.