通过下面的表格可以详细查看栅格系统如何在多种不同屏幕大小的设备上工作的。

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。 因此，应用任何 .col-md- 一个元素的类不仅会影响其在中型设备上的风格，而且还会影响其在大型设备上的风格 .col-lg- 元素内即可。

使用单一的一组 .col-md-* 栅格，您就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。将列(col-*-*)放置于任何.row元素内即可。

如果您不希望在小屏幕设备上所有列都堆叠在一起，可以使用针对超小屏幕和中等屏幕设备所定义的 .col-xs-* .col-md-*

通过使用平板电脑 .col-sm-* 类创建更加动态和强大的布局，构建上一个示例 。

即便有上面给出的四组栅格 class ，你可能仍然会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具的类

使用 .col-md-offset-* 类向右移动列 。这些类通过 * 列增加列的左边距 。例如， .col-md-offset-4 移动 .col-md-4 四列。

嵌套使用默认网格您的内容，添加新的 .row 和一组 .col-md-* 列现有的内 .col-md-* 柱。嵌套行应包含一组最多可添加12的列。

轻松地改变内置网格列的顺序 .col-md-push-* 和 .col-md-pull-* 修饰符类。