栅格系统中的列嵌套 - 前端学习教程_ 前端_前端开发

栅格系统中内置的栅格系统可以将内容再次嵌套。简单的理解就是一个列内再分成若干份小列。实现的主要思路是我们可以通过添加一个新的.row元素和一系列的.col-sm-元素到已经存在的.col-sm-元素内部。下面通过例5-1演示列的嵌套的实现过程。

【例5-1】

（1）创建C:\Bootstrap\chapter05\demo07.html文件，具体代码如下。

1  <!DOCTYPE html>
2  <html>
3  <head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
7   <title>Document</title>
8   <style>
9    .row > div {
10    height: 50px;
11    background-color: #eee;
12   }
13    .col-md-4 {
14    border: 1px solid #fff;
15    text-align: center;
16    line-height: 50px;
17    font-size: 30px;
18   }
19   .col-md-6 {
20    border: 1px solid #fff;
21   }
22  </style>
23 </head>
24 <body>
25  <div class="container">
26   <div class="row">
27    <div class="col-md-4">
28     <div class="row">
29      <div class="col-md-6">第一列</div>
30      <div class="col-md-6">第二列</div>
31     </div>
32    </div>
33    <div class="col-md-4">第二列</div>
34    <div class="col-md-4">第三列</div>
35   </div>
36  </div>
37 </body>
38 </html>

上述代码中，第9~12行代码定义.row下的div元素样式，其中高度为50px，背景颜色为#eee；第13~18行代码定义.col-md-4的样式，其中，边框大小1px，边框颜色为白色，行高为50px，内容居中显示；第19~21行代码定义.col-md-6的样式，其中，边框大小1px，边框颜色为白色实线；第25行代码定义div布局容器为.container；第28行代码在布局容器中定义.row行；第27~34行代码在.row行中定义3个col-md-4列；第29~30行代码在第一列的.row中定义.col-md-6和.col-md-6两个列的内容。

值得一提的是，在进行列嵌套时，需要在列的最外侧加上1个行.row，这样就可以取消父元素.container的padding值。此时，子元素的高度自动和父元素一样高。

（2）在浏览器中打开demo07.html文件，运行结果如图1所示。

图1 列嵌套

图1中，在第一列中成功嵌套了“第一列”和“第二列”两个列的内容。