网格系统下的推送和偏移有什么区别？

Question

我试图理解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>

Answer 1

由于偏移使用margin-left和推送使用left:

• offset将强制相邻列移动
• 推(和拉)将与其他列重叠

这是一个视觉示例:http://www.bootply.com/126557

在您的示例中,没有列"碰撞".由于相邻列不受影响,推送和偏移显示相同.

Answer 2

.col-md-offset-*:将增加左边界*类

.col-md-push-*/ .col-md-pull-*:将更改网格列按*类显示的顺序.Pull会将列发送到左侧,而push则将其发送到右侧.

• 偏移的文件
• 推/拉的文件