网格系统中的push和offset有什么区别？

Question

我试图理解Bootstrap网格系统中push和offset之间的区别。例如，下面两行之间唯一的区别是每行的第三列。一个使用了push，而另一个使用了offset。然而，它们都呈现出完全相同的效果。

<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>

- Randy Minder

Answer 1

由于offset使用margin-left，而push使用left：

• offset将强制相邻的列移动
• push（和pull）将重叠其他列

这里有一个视觉示例：http://www.bootply.com/126557

在您的示例中，没有列“碰撞”。由于相邻的列没有受到影响，因此推送和偏移看起来相同。

- Zim

---

答案中的链接无法打开。 - A_J

Answer 2

.col-md-offset-*：将左边距增加*个类

.col-md-push-*/.col-md-pull-*：将网格列的顺序更改为*个类。Pull会将列向左移，而Push会将其向右移。

• offset相关文档
• push/pull相关文档

- gustavohenke

Answer 3

在Bootstrap中，偏移量将偏移列的左侧，从而将其向右移动或“偏移”某些内容。使用“offset”样式，您只能将项目向右偏移。对于推和拉操作，您可以将某些内容向“左侧或右侧”拉动，也可以将某些内容推到与拉动相反的位置。推拉项目主要用于列排序。

- Ty T.