В чем разница между push и offset под сеткой?

Я пытаюсь понять разницу между push и offset в сетях Bootstrap. Например, единственная разница между двумя строками ниже - это третий столбец в каждом. Один использует push, а другой использует смещение. Тем не менее, оба они отображают точно то же самое.

<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="#" onclick="location.href='http://go.microsoft.com/fwlink/?LinkId=301865'; return false;">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="#" onclick="location.href='http://go.microsoft.com/fwlink/?LinkId=301866'; return false;">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="#" onclick="location.href='http://go.microsoft.com/fwlink/?LinkId=301867'; return false;">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="#" onclick="location.href='http://go.microsoft.com/fwlink/?LinkId=301865'; return false;">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="#" onclick="location.href='http://go.microsoft.com/fwlink/?LinkId=301866'; return false;">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="#" onclick="location.href='http://go.microsoft.com/fwlink/?LinkId=301867'; return false;">Learn more &raquo;</a></p>
    </div>
</div>

Ответ 1

Так как offset использует margin-left, а push использует left:

смещение заставит другие столбцы перемещаться
push (и pull) будет перекрывать другие столбцы

Вот визуальный пример: http://www.bootply.com/126557

В вашем примере нет столкновений "столкновений". Push и offset появляются одинаково, так как соседние столбцы не влияют.

Ответ 2

.col-md-offset-*: увеличит левое поле на * classes

.col-md-push-*/.col-md-pull-*: изменит порядок отображения столбцов сетки классами *. Pull отправит столбец влево, а push направит его вправо.

Ответ 3

Смещение в бутстрапе будет смещать левую сторону столбца, таким образом перемещая его или "компенсируя" что-то вправо. С помощью стиля "смещение" вы можете смещать только объекты вправо. Для толчков и тяг вы можете тянуть что-то к "левому или правому", или вы можете нажимать что-то противоположное тяге. Нажатие или вытягивание элементов первично используется для упорядочения столбцов.