网格系统下push和offset有什么区别? [英] What is the difference between push and offset under the grid system?

查看：37
本文介绍了网格系统下push和offset有什么区别?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<div class="col-md-2"><h2>第1列</h2><p>这是第 1 列的文本</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">了解详情&raquo;</a></p>
<div class="col-md-2"><h2>第2列</h2><p>这是第 2 列的文本</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">了解详情&raquo;</a></p>

<div class="col-md-2 col-md-push-6"><h2>第3列</h2><p>这是第 3 列的文本</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">了解详情&raquo;</a></p>

<div class="row"><div class="col-md-2"><h2>第1列</h2><p>这是第 1 列的文本</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">了解详情&raquo;</a></p>

<div class="col-md-2"><h2>第2列</h2><p>这是第 2 列的文本</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">了解详情&raquo;</a></p>

<div class="col-md-2 col-md-offset-6"><h2>第3列</h2><p>这是第 3 列的文本</p><p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">了解详情&raquo;</a></p>

解决方案

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

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

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

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>

解决方案

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

Here's a visual example: 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有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆