CSS 网格系统下push和offset有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22792778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between push and offset under the grid system?
提问by Randy Minder
I'm trying to understand the difference between push and offset in Bootstrap grids. For example the only difference between the two rows below is the third column in each. One uses a push and the other uses an offset. However, they both render exactly the same.
我试图了解 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 »</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 »</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 »</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 »</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 »</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 »</a></p>
</div>
</div>
回答by Zim
Since offset uses margin-left, and push uses left:
由于 offset 使用margin-left，而 push 使用left：
- offset will force neighboring columns to move
- push (and pull) will overlap other columns
- 偏移将迫使相邻的列移动
- 推（和拉）将与其他列重叠
Here's a visual example: http://www.bootply.com/126557
这是一个视觉示例：http: //www.bootply.com/126557
In your example there are no column 'collisions'. Push and offset appear the same since the neighbouring columns aren't impacted.
在您的示例中，没有“碰撞”列。Push 和 offset 看起来相同，因为相邻列不受影响。
回答by gustavohenke
.col-md-offset-*: will increase the left margin by *classes
.col-md-offset-*: 将按*类别增加左边距
.col-md-push-*/.col-md-pull-*: will change the order the grid columns appear by *classes. Pull will send the column to the left, while push send it to the right.
.col-md-push-*/ .col-md-pull-*：将更改网格列按*类显示的顺序。拉将向左发送列，而推将其向右发送。
回答by Ty T.
A offset in bootstrap will offset the left side of the column thus moving it over or "offsetting" something to the right. With the "offset" style you can only offset items to the right. For pushes and pulls you can pull something to the "left or right" or you can push something opposite of pull. Pushing or pulling items is primary used for column ordering.
bootstrap 中的偏移量将偏移列的左侧，从而将其移过或“偏移”到右侧。使用“偏移”样式，您只能将项目向右偏移。对于推拉，您可以向“左或右”拉某物，也可以推与拉相反的某物。推或拉项目主要用于列排序。
