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

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

<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>
3 54
twitter-bootstrap twitter-bootstrap-3

3 ответа:

так как смещение использует margin-left, и push использует left:

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

вот наглядный пример:http://www.bootply.com/126557

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

87

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

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

6

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

1