现在你看到的是一个简单的两栏布局的页面，左边主体部分占用了 8 栏网格，右边的边栏，占用了剩下的 4 栏网格。

在主体或者边栏的里面，我们可以使用嵌套布局，比如可以再把主体这块，再分成几个小部分。每个部分里面，再放点东西。

先回到编辑器 ... 找到主体这块内容的代码 ... 你会看到在它上面再在用了一个 col-md-8 ，表示在中等尺寸的桌面电脑设备上，它会占用 8 个网格的宽度。

在它的里面使用嵌套的布局，需要先用一组带 row 类的容器 ... 可以用一个 div 标签 ... 上面加上一个 row ..

div.row ...

用它，在主体内容的内部，去定义一排新的内容 ... 主体这块的空间又会被分成 12 份，比如，我们想在这里显示三块内容，各占用三分之一的宽度。这样也就是每块内容上，要使用的网格数是 4 。

div.col-md-4*3

在它们里面再添加点内容 ... h2 ... 区块一 .... p ... lorem .. 安装了 emmet 插件以后，可以使用快捷键 alt + command + → ... 跳转到下一处编辑点 ... Windows 上应该是 alt + ctrl + →

区块二 ... lorem ... 区块三 .. lorem ...

保存 ... 回到浏览器 ... 刷新 ...

你会看到，主体内容的里面，又平均分成了三份。

我们可以继续往这里添加新的内容 ... 新添加的内容会挤到第二排显示，因为第一排的空间已经被占满了 ... 回到编辑器 ...

再添加一个 div 标签，上面加上一个 col-md-6 ... 需要两个这样的元素 .... 分别在它们里面，再加上点东西 ...

保存 .. 回到浏览器 ... 刷新 ... .

在新的一排会显示后来添加的区块四，还有区块五 ...

再回到编辑器。我们在 区块一这里，多加点东西 ... 保存 ... 回到浏览器 ...

你会发现，区块四，被区块一给挡住了 ... 解决这个问题，可以在区块四的前面，加上一组带 clearfix 类的元素 ... 或者，我们也可以把区块一到区块三，放在一个带 row 类的容器里面。

再把区块四，还有区块五，放在一个带 row 类的容器里面 ....

先回到编辑器 ... 在 区块四的上面，添加一组 div 标签 ... 上面加上一个 clearfix 类 ... 这个类的样式，可以修复元素浮动的问题 ...

保存 ... 再回到浏览器上看一下 ....

这次，区块四，还有区块五，又会在新的一排显示了。