Qu'est-ce que le décalage dans bootstrap ?

Question

Je comprends ce qu'est une grille, en gros une ligne entière aura 12 espaces.

<div class="row">
  <div class="col-md-4">
  </div>

   <div class="col-md-4">
  </div>

   <div class="col-md-4">
  </div>
</div>

En fait, le code ci-dessus divise simplement les espaces en 3 sections, mais ce que je ne comprends pas, c'est l'intérêt de ce décalage.

<div class="col-lg-6 col-md-offset-3">

    </div>

Que fait exactement le code ci-dessus ?

Answer 1

Les décalages sont utilisés pour espacer les éléments dans la grille responsive.

L'unité est basée sur la disposition en colonnes.

Vous pouvez définir un décalage de cette manière : col-[point de rupture]-offset-[nombre de colonnes]

Dans cet exemple, en admettant que notre schéma soit composé de 12 colonnes :

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <p>test</p>
    </div>
</div>

Cela signifie que dans la gamme moyenne du système de grille, l'élément aura une largeur de 6 colonnes et il y aura 3 colonnes vides avant l'élément (y Par conséquent, il y aura 3 colonnes vides après ).

Le résultat est un div de 6 colonnes de largeur, centré dans le conteneur.

La documentation Bootstrap présente un exemple de rendu. http://getbootstrap.com/css/#grid-offsetting

Answer 2

Le décalage signifie : Déplacer les colonnes vers la droite à l'aide de la touche .col-md-offset-* classes. Ces classes augmentent la marge gauche d'une colonne de * colonnes.

Par exemple col-md-offset-3 augmente la marge de gauche de 3 pour les appareils de taille moyenne.