Bootstrap中的col-lg-*，col-md- *和col-sm- *有什么区别？

2020年更新...

自举5

在Bootstrap 5（alpha）中，有一个新的-xxl-大小：

col-*-0（xs）
col-sm-*-576px
col-md-*-768px
col-lg-*-992px
col-xl-*-1200px
col-xxl-*-1400px

Bootstrap 5网格演示

---

引导程序4

在引导4有一个新的-xl-大小，请参阅该演示。另外，-xs-缀已经被移除，所以最小的列是简单的col-1，col-2..col-12等。

col-*-0（xs）
col-sm-*-576px
col-md-*-768px
col-lg-*-992px
col-xl-*-1200px

Bootstrap 4网格演示

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

---

引导程序3

所述自举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，md而lg电网将在屏幕上/视所有“堆栈”纵向比768少。这是xs网格适合的地方。使用col-xs-*类的列将不会垂直堆叠，并且会继续在最小的屏幕上按比例缩小。

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

---

本文介绍了有关Bootstrap网格的更多信息