Bootstrap 网格系统

实际上就是用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)增加 * 列,其中 * 范围是从 111

嵌套列

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

列排序

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

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

 

此处评论已关闭