web-dev-qa-db-fra.com

Décalage des colonnes dans Bootstrap

C'est l'idée de ce que je veux faire: 

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-2"></div>
    </div>
</div>

Comment cela fonctionnerait-il en utilisant l'offset?

htmltwitter-bootstrapoffset
7
sumguy

Le décalage fonctionne comme une colonne vide qui restera avant votre colonne. Par exemple, si vous voulez une colonne qui aura la moitié de la taille de l'écran et sera exactement au milieu, vous devrez faire:

<div class="col-sm-6 col-sm-offset-3"></div>

Une ligne complète a 12 colonnes. De cette façon, vous aurez 6 colonnes (la moitié de la ligne) et un décalage de 3 colonnes. Ce sera exactement au milieu de l'écran.

Jetez un oeil sur Bootstrap documentation.

11
Luiz Henrique

Dans Bootstrap 3, comme ceci ..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

http://www.codeply.com/go/7wofwfzrH3

Dans Bootstrap 4, comme ceci ..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 offset-sm-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

https://www.codeply.com/go/t5DTGwero8

6
Zim

Ce qui précède ne fonctionne pas pour moi car je pense les classes de bootstrap ont légèrement changé.

<div class="col-md-4 offset-md-2">

Ça marche pour moi.

J'espère que cela t'aides

Dave

1
demsley