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

可以通过控制浏览器的宽度查看堆叠和水平排列的效果

很明显这就是堆叠的效果，就是将浏览器的宽度调为比较小的时候。

现在便是水平排列。将浏览器的宽度调为稍宽之后。你也可以使用其他三个类进行测试效果。

移动设备和桌面

从上面的案例我们可以发现，当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆叠的状态，那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。那么我们的.col-xs-*（小于768px屏幕的样式类）就派上用场了。

通过代码可以发现针对前两个的.row样式类中的div，我们在每个元素上面都设置了两个样式类。

这是在稍大尺寸的屏幕上展示的效果，针对每个元素的两个样式会在不同尺寸下进行合适的选择，那么在稍大的情况下，选择的样式类就会是.col-md-*。

所以：

第一行：8和4的份比。

第二行：三个4平平均分成三份。

第三行：6和6虽然是大尺寸因为只有这一个样式，也是平均分成两份。

现在就是页面屏幕小于一定程度的时候，针对每个元素进行重新选择样式类。现在真对前两个.row选择的都是col-xs-*。

所以：

第一行：两个元素分为12和6，而一行呢就是12份，所以第二个元素会进行换行，然后占据6份一半的位置。

第二行：3个6份。而一行呢就是12份。所以第三个元素会进行换行，然后占据6份一般的位置。

（编辑：佛山站长网）

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