Bootstrap-列排序

可以用:

.col-md-push-*

.col-md-pull-*

这两个类来实现改变列的顺序,我们知道Bootstrap默认是从左开始排列的,那么,上面两个类就是:一个往右推,一个往左拉!

我们看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列排序</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
<body> 
   <p style="text-align: center;font-size: 30px">栏格布局-列嵌套</p>
   <div class="container">
        <div class="row"> 
            <div class="col-sm-9">col-sm-9</div>
            <div class="col-sm-3">col-sm-3</div>
        </div>
   </div>
</body>
</html>

运行结果:

我们看到:col-sm-9排在前面,那我想把col-sm-3排在前面怎么弄呢?

我们可以把col-sm-9往右推3格,把col-sm-3往左拉 9格!

这里说一下,我们往右推移了9,但也要往左拉,不然你会看到:

我们已经让其往右推了,但是col-sm-3没有往左拉,所以依然会在最右边!

最后我们看:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列排序</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
        div{
            border-style: solid;
            border-width: 1px;
            border-color: #ccc;
        }
    </style>
<body> 
<p style="text-align: center;font-size: 30px">栏格布局-列排序</p>
   <div class="container">
        <div class="row"> 
            <div class="col-md-9 col-md-push-3">col-sm-9</div>
            <div class="col-md-3 col-md-pull-9">col-sm-3</div>
        </div>
   </div>
</body>
</html>

运行结果:

列的简单排序就实现了!

posted @ 2019-09-06 14:28  阿沅lmo  阅读(75)  评论(0编辑  收藏  举报