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

Question

是什么之间的差异col-lg-*，col-md-*并col-sm-*在Twitter的引导？

Answer 1

2019年更新…

所述 自举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-*类的列将 不会
垂直堆叠，并且会继续在最小的屏幕上按比例缩小。

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

引导程序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包括新的自动布局列。这些也有响应断点（col，col-sm，col-md，等），但没有定义％的宽度。因此，自动布局列在行中的宽度相等 。