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

Question

我想了解Bootstrap网格中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> 

Answer 1

由于偏移使用margin-left，和推使用left：

• 偏移将迫使相邻列移动
• 推（和拉）将重叠其他栏目

这里有一个直观例子：http://www.bootply.com/126557

在您的例子有没有列“冲突”。由于相邻列不受影响，推送和偏移显示相同。

Answer 2

引导程序中的偏移量将偏移列的左侧，从而将其移到右边或“偏移”某些东西到右边。使用“偏移”风格，您只能将项目偏移到右侧。对于推拉，您可以将某些东西拉到“左边或右边”，或者您可以推拉拉的对面。推或拉项目主要用于列排序。

Answer 3

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

.col-md-push-*/.col-md-pull-*：将*类更改网格列的显示顺序。拉将发送列向左，而推送发送到右侧。

• Docs for offset
• Docs for push/pull