Bootstrap3.0学习第三轮：栅格系统案例

嵌套列

为了使用内置的栅格进行内容的嵌套，通过添加一个新的.row和一系列的.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套列所包含的列加起来应该等于12。

通过上面的代码可以发现，首先定义了一个row,然后在此row中添加了一个.col-md-9的列，代表这个元素占有9列。

然后在这个占有9列的元素里面添加了两个不同的row。

即第一个row:将第一个row分成了两份，每份占有的6列，这12列，但是其总宽度和它外面的占有9列的元素的宽度是一样的。

第二个row:将第二个row分成了两份，第一份占有3列，第二份占有6列，然后剩余的3列没有进行填充。

列排序

中文网的解释是：通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

通过代码实现了，看到效果了，对于这句话的理解我还是没有摸透。

可以看出，我定义了三行。

第一行被平均分成三份，每份占有四列。这一行主要是为了与下面两行进行对照的。

第二行里只有一个元素且是占有两列，然后对此元素也添加了.col-md-push-4的样式类。（让占有两个列的元素又向右移动了4列那么现在就是占据了第五列和第六列。）

第三列被分为两份，第一份占有七列，不过是空的，然后第二份占有五列，并且对此元素也添加了一个.col-md-pull-4的样式类，当然此类和上一行附加的类应该正好有相反的效果。（让占有5列的元素又向左移动了四列，原来是从第八列开始的，那么现在是从第四列开始的。）

现在来看一下效果展示

总结

本文都是通过最简单的案例，来剖析案例中涉及到的布局要点。这一篇下来，自己感觉学到的还是蛮多的，感觉需要从头再看一遍。其中对有些地方的理解可能不是很到位，希望有理解的、并且看到的前辈大牛可以帮小弟指正一下，小弟在此先谢过你们了。写完这一篇感觉很不错，学到了好多，当然也希望对各位看官能有点儿帮助。

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!