栅格 列排序
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
- <div class="row">
- <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
- <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
- </div>
在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 实例 - 列排序</title>
- <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
- <script src="/scripts/jquery.min.js"></script>
- <script src="/bootstrap/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>
运行结果：
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
