Bootstrap 网格层（断点）

除了列单元的概念之外，Bootstrap 还有不同的断点或网格大小，称为层。Bootstrap 3 网格有四（4）层，以适应不同的屏幕（或视口）宽度。Bootstrap 3 层是 xs，sm，md 和 lg。Bootstrap 的网格列由不同的 col-{breakpoint}-{units} CSS 类标识。

每个网格层都包含一个范围，旨在最佳地适应典型的设备屏幕宽度，如台式机，笔记本电脑，平板电脑和智能手机。

Bootstrap 使用 CSS 媒体查询来创建响应断点，为每个网格大小建立边界。这些网格大小使你可以更改列的布局，以最佳匹配不同的屏幕宽度和设备_响应式设计的本质。

• col-xs-* - 用于智能手机的最小屏幕宽度<768 像素
• col-sm-* - 适用于智能手机和平板电脑的小屏幕宽度> = 768 像素
• col-md-* - 适用于平板电脑和笔记本电脑的中等屏幕宽度> = 992 像素
• col-lg-* - 适用于大型屏幕宽度，如桌面> = 1200 像素

参考： 网格系统

每个设备的列宽相同

要创建始终为视口宽度 50％ 的列 （在所有设备上），你可以为每个层设置 col-*-6 ..

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">..</div>

然而，这是不必要的额外标记，因为 col-xs-6 意味着 xs 及以上的 6 个单位。你设置的最小层（xs，sm 或 md）也定义了较大屏幕宽度的大小。对于所有层上的相同大小的列，只需设置最小视口的宽度。

更短的代码：

<div class="col-xs-6">..</div>

每个设备的不同列宽（响应式设计）

可以组合 col-*-*类来控制不同网格大小的列宽。

例如，在 sm 层创建一个 50％ 宽度的列，在 md 层创建一个 25％ 宽度的列…

<div class="col-md-3 col-sm-6">..</div>

sm，md 和 lg 网格将在视口宽度小于 768 像素时垂直堆叠。这是 xs 网格适合的位置。使用 col-xs- *类的列不会垂直堆叠，并且会在最小的屏幕上继续缩小。