Board logo

标题: Bootstrap CSS----------Bootstrap 网格系统(7) [打印本页]

作者: look_w    时间: 2019-5-11 14:56     标题: Bootstrap CSS----------Bootstrap 网格系统(7)

列排序---调整列的顺序

我们知道col-xx-* 是用来觉得列的宽度的,表示占据12格子中的多少格。然后按照顺序排序,那么如果我们要调整列的顺序呢。

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

可以使用.col-xx-push-* 和 .col-xx-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
在下面的实例中,我们有两列布局,第一列是占据4格比较短,第二列占据8格,比较长。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。让第二列变成第一列,长的在左边。代码如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列偏移--让列居中</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Hello, world!</h1>
        <div class="row">
            <p>
                排序前
            </p>
            <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             我在左边
            </div>
            <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             我在右边
            </div>
        </div>
        <br>
        <div class="row">
            <p>
                排序后
            </p>
            <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             我在左边
            </div>
            <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             我在右边
            </div>
        </div>
    </div>
     
    </body>
    </html>

效果图:




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0