6.2.6 嵌套网格
Bootstrap
的网格系统是支持嵌套的,在单元格内可以再次添加class="row"
来增加行,在行内可再次添加单元格。
嵌套网格不再需要放在class="container"
或class="container-fluid"
的容器内。
例如如下示例代码示范了列嵌套:
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
| <!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-4">(1).col-md-4</div> <div class="col-sm-8"> <div class="row"> <div class="col-sm-6">(1-1-1).col-md-6</div> <div class="col-sm-6">(1-1-2).col-md-6</div> </div> <div class="row"> <div class="col-sm-3">(1-2-1).col-md-3</div> <div class="col-sm-9">(1-2-2).col-md-9</div> </div> </div> </div> <div class="clearfix visible-sm-block"></div> <div class="row"> <div class="col-sm-4">(1).col-md-7</div> <div class="col-sm-8">(2).col-md-5</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>
|
上面代码在第一个行的第二个单元格内再次嵌套了2行。
原文链接: 6.2.6 嵌套网格