网格系统下推和偏移有什么区别?

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

由于抵消使用margin-left ,并推用left

  • 偏移将迫使其他列移动
  • 推(和拉)将重叠其他列

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

在你的例子中没有列'碰撞'。 由于相邻列不受影响,推送和偏移显示相同。

.col-md-offset-* :将会增加*类的左边距

.col-md-push-* / .col-md-pull-* :将改变网格列由*类出现的顺序。 拉将发送列向左,而推送发送到右侧。

  • Docs for offset
  • 文件推/拉

自举中的偏移将抵消列的左侧,从而将其移到右侧或“抵消”到右侧。 使用“偏移”风格,您只能将项目偏移到右侧。 推拉你可以拉东西到“左边或右边”,或者你可以推拉对面的东西。 推或拉物品主要用于列订购。