在网格系统下，推入和偏移之间有什么区别? [英] What is the difference between push and offset under the grid system?

问题描述

我试图了解Bootstrap网格中推入和偏移之间的区别.例如，下面两行之间的唯一区别是每一行中的第三列.一个使用推，另一个使用偏移.但是，它们的渲染完全相同.

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.

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

推荐答案

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

Since offset uses margin-left, and push uses left:

• 偏移量将迫使相邻列移动
• 推(并拉)将与其他列重叠

这是一个直观的示例: http://www.bootply.com/126557

Here's a visual example: http://www.bootply.com/126557

在您的示例中，没有冲突"列.由于相邻列均不受影响，因此push和offset看起来是相同的.

In your example there are no column 'collisions'. Push and offset appear the same since the neighbouring columns aren't impacted.

这篇关于在网格系统下，推入和偏移之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！