6.2.5 单元格排序
Bootstrap
提供了.col-xx-push-N
、.col-xx-pull-N
来控制列排序,其中,
.col-xx-push-N
表示让单元格向右浮动,xx
表示xs
、sm
、md
和lg
等尺寸,N表示1到12的整数,表示浮动几列;
对应地,.col-xx-pull-N
表示让单元格向左浮动。
看如下示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
| <!DOCTYPE html> <html>
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 网格 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> <style type="text/css"> .row { margin-bottom: 20px; }
[class*="col-"] { padding-top: 15px; padding-bottom: 15px; background-color: #eee; background-color: rgba(86, 61, 124, .15); border: 1px solid #ddd; border: 1px solid rgba(86, 61, 124, .2); } </style> </head>
<body> <div class="container"> <div class="row"> <div class="col-sm-3">(1).col-md-3</div> <div class="col-sm-3">(2).col-md-3</div> <div class="col-sm-3">(3).col-md-3</div> <div class="col-sm-3">(4).col-md-3</div> </div> <div class="row"> <div class="col-sm-3 col-sm-pull-3">(1).col-md-3</div> <div class="col-sm-3">(2).col-md-3</div> <div class="col-sm-3">(3).col-md-3</div> <div class="col-sm-3">(4).col-md-3</div> </div> <div class="row"> <div class="col-sm-3 col-sm-push-3">(1).col-md-3</div> <div class="col-sm-3">(2).col-md-3</div> <div class="col-sm-3">(3).col-md-3</div> <div class="col-sm-3">(4).col-md-3</div> </div> <div class="row"> <div class="col-sm-3 col-sm-push-3">(1).col-md-3</div> <div class="col-sm-3 col-sm-pull-3">(2).col-md-3</div> <div class="col-sm-3">(3).col-md-3</div> <div class="col-sm-3">(4).col-md-3</div> </div> </div> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
在该网格中一共定义了4行,其中第一行包含4个单元格,每个单元格宽度为3列,因此它们正好平分12列,我们可以把它们当成标准与后面的行进行对比。
第二行的第一个单元格被指定了col-sm-pull-3
,这意味着第一个单元格将会向左浮动3列。
第三行的第一个单元格被指定了col-sm-push-3
,这意味着第一个单元格将会向右浮动3列,因此该行的第一个单元格将会与第二个单元格重叠在一起。
第四行的第一个单元格被指定了col-sm-push-3
,这意味着第一个单元格将会向右浮动3列,第二个单元格被指定了col-sm-pull-3
,这意味着第二个单元格将会向左浮动3列,这样该行的第一个和第二个单元格将会交换位置。
原文链接: 6.2.5 单元格排序