实际上就是用bootstrap提供的类名

网格选项

下标总结了 Bootstrap 网格系统如何跨多个设备工作：

	额外的小设备收集（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列 #	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

响应式的列重置

把四层网格绑定运行总是在特定的断点遇到问题，因为列不知道哪一个网格处于高层。为了解决这个问题，使用 class .clearfix

偏移列

.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。

嵌套列

请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列总计达 12。

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。您可以很轻易地改变带有.col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

原文地址：http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-grid-system.html

 

最后更新于 2017-03-17 15:58:08 并被添加「」标签，已有 661 位童鞋阅读过。