网格选项--基于引导网格系统概述

看如何在多个设备上使用一个方便的表,引导网格系统工作的方面。

超小型装置 Phones (<768px) 小装置 Tablets (≥768px) 中等设备 Desktops (≥992px) 大型设备 Desktops (≥1200px)
网格行为 水平在任何时候 崩溃的开始,水平以上的断点
最大网格宽度 None (auto) 750px 970px 1170px
样式类前缀 .col-xs- .col-sm- .col-md- .col-lg-
# 列 12
最大单元格宽 Auto 60px 78px 95px
网格线宽 30px (15px on each side of a column)
嵌套 Yes
偏移 Yes
列排序 Yes

网格类适用于具有屏幕宽度大于或等于断点大小的设备,并覆盖在较小的设备上的网格类。因此,应用任何 .col-md- 类到一个元素将不仅影响其造型在中等设备,但也对大型设备,如果 .col-lg- 类不存在。

使用一组 .col-md-* 网格类,您可以创建一个默认的网格系统,开始了堆叠在移动设备和平板设备(额外的小范围小到小范围),然后才成为桌面(中型)设备。放置在任何 .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

不想让你的列,简单地堆在较小的设备?通过添加额外的中小型设备网格类 .col-xs-* .col-md-* 见下面的例子,以更好地了解它是如何工作的.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
移动,平板电脑,台式电脑

建立在前一个例子,通过创建更强大的动态和强大的布局与平板电脑 .col-sm-* 类.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

有了四层网格,你必然会遇到一些问题,在某些地方,你的专栏并不清楚,因为一个比另一个更高。要解决这个问题,使用一个组合 .clearfix 我们的响应实用类.

.col-xs-6 .col-sm-3
调整你的视口或检查它在您的手机为例。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

将列移到右边使用 .col-md-offset-* 这些类增加一列的左边缘 * 栏目。例如, .col-md-offset-4 移动 .col-md-4 超过四列。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

用默认的网格嵌套您的内容,添加新的 .row 和套 .col-md-* 存在的列 .col-md-*列。嵌套行应包含一组添加到12。

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6

很容易地改变我们的内置网格列的顺序 .col-md-push-*.col-md-pull-* 改变类的内容。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9