twitter-bootstrap Bootstrap网格层（断点）
示例
除了列单元的概念外，Bootstrap具有不同的断点或称为“层”的网格大小。Bootstrap3网格具有四(4)层，以适应不同的屏幕（或视口）宽度。自举3层是xs，sm，md，和lg。Bootstrap的网格列由不同的col-{breakpoint}-{units}CSS类标识。
每个网格层都包含一个旨在最适合典型设备屏幕宽度的范围，例如台式机，笔记本电脑，平板电脑和智能手机。
Bootstrap使用CSS媒体查询来创建响应性断点，这些断点为每个网格大小建立边界。这些网格大小使您可以更改列的布局，以最佳地匹配不同的屏幕宽度和设备，这是响应式设计的本质。
col-xs-* —适用于最小屏幕宽度，例如<768px的智能手机
col-sm-* —适用于较小的屏幕宽度，例如智能手机和平板电脑>=768px
col-md-* —适用于中等屏幕宽度，例如平板电脑和笔记本电脑>=992px
col-lg-* —适用于大屏幕宽度，例如台式机>=1200px
参考：网格系统
每个设备的列宽相同
要创建始终是视口宽度（在所有设备上）的50％的列，可以col-*-6为每个层设置。
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>
但是，这是不必要的额外标记，因为这col-xs-6意味着要增加6个单位xs。您设置的最小层（xs，sm或md）还定义了较大屏幕宽度的尺寸。对于所有层上相同大小的列，只需设置最小视口的宽度即可。
较短的代码：
<div class="col-xs-6">..</div>
每个设备的列宽不同（响应式设计）
col-*-*可以组合这些类以控制不同网格大小上的列宽。
例如，在层上创建50％宽度的列，在sm层上创建25％宽度的列md...
<divclass="col-md-3col-sm-6">..</div>
的sm，md而lg电网将所有的视口宽度“栈”垂直小于768个像素。这就是xs网格所在的地方。使用col-xs-*类的列将不会垂直堆叠，并且会继续在最小的屏幕上按比例缩小。