2020年更新…

引导程序 5

在 Bootstrap 5 (alpha) 中有一个新的-xxl-大小：

col-*- 0 (xs)
col-sm-*- 576像素
col-md-*- 768 像素 - 992 像素- 1200 像素- 1400 像素
col-lg-*
col-xl-*
col-xxl-*

Bootstrap 5 网格演示

引导程序 4

在 Bootstrap 4 中有一个新的-xl-大小，请参阅这个演示。中
-xs- 缀也被删除了，所以最小的列是简单的col-1，col-2.. col-12，等等。

col-*- 0 (xs)
col-sm-*- 576像素
col-md-*- 768 像素 - 992
col-lg-*像素
col-xl-*- 1200 像素

Bootstrap 4 网格演示

此外，Bootstrap 4
包括新的自动布局列。这些也有响应断点（col, col-sm,col-md等），但没有定义 % 宽度。因此，自动布局列在行上填充
相等的宽度 。

引导程序 3

Bootstrap 3 网格分为 4 层（或“断点”）......

• 超小（适用于智能手机.col-xs-*）
• 小（用于平板电脑.col-sm-*）
• 中（适用于笔记本电脑.col-md-*）
• 大（适用于笔记本电脑/台式机.col-lg-*）。

这些网格大小使您能够控制不同宽度上的网格行为。不同的层由 CSS媒体查询控制。

所以在 Bootstrap 的 12 列网格中......

col-sm-3 在典型的小 设备宽度（> 768 像素）上是 12 列中的 3 列（25% ）

col-md-3 在典型的中等 设备宽度（> 992 像素）上是 12 列中的 3 列 (25% )

较小的层（xs或sm）md还定义了较大屏幕宽度的尺寸。因此，对于所有层上 相同 大小的列，只需设置最小视口的宽度…

<div class="col-lg-3 col-md-3 col-sm-3">..</div>是相同的，

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

隐含 更大的层级。因为col-sm-3意味着3 units on sm-and-up, 除非被使用不同大小的更大层特别覆盖。

xs（默认） > 被覆盖sm> 被覆盖md> 被覆盖lg

组合这些类以在 不同的 网格大小上使用更改列宽。这将创建一个响应式布局。

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

,sm和网格将全部垂直“堆叠”在小于 768 像素的屏幕/视口上md。lg这是xs网格适合的地方。使用col-xs-*类的列 不会
垂直堆叠，并在最小的屏幕上继续按比例缩小。

使用此演示调整浏览器大小，您将看到网格缩放效果。