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

I think this image is pretty good to understand the concept better!

for more detail understanding please go though below link:

https://getbootstrap.com/docs/3.4/css/

TL; DR

.col-X-Y表示在屏幕尺寸X或更大的尺寸上，拉伸该元素以填充Y列。

Bootstrap提供了每个12列的网格.row，因此Y = 3表示宽度= 25％。

xs, sm, md, lg 分别是智能手机，平板电脑，笔记本电脑和台式机的尺寸。

在不同的屏幕尺寸上指定不同的宽度的目的是让您在较小的屏幕上放大尺寸。

例

<div class="col-lg-6 col-xs-12">

含义：台式机为50％宽度，移动设备，平板电脑和笔记本电脑为100％宽度。

一种特殊情况：在学习引导网格系统之前，请确保将浏览器缩放比例设置为100％（百分之百）。例如：如果屏幕分辨率为（1600px x 900px），浏览器缩放比例为175％，则将堆叠“自举”元素。

的HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

铬变焦100％

浏览器100％-元素水平放置

镀铬变焦175％

浏览器175％-堆叠式元素

从Twitter Bootstrap文档中：

• 小网格（≥768px）= .col-sm-*，
• 中格（≥992px）= .col-md-*，
• 大网格（≥1200px）= .col-lg-*。

我认为这令人困惑的方面是，BootStrap 3是一个移动优先响应系统，无法在Bootstrap文档的那部分中解释这如何影响col-xx-n层次结构。这使您想知道如果为较大的设备选择一个值，那么在较小的设备上会发生什么，并且使您怀疑是否需要指定多个值。（你不）

我将尝试通过阐明以下内容来澄清这一点：较小的晶粒类型（xs，sm）尝试在较小的屏幕上保留布局外观，而较大的晶粒类型（md，lg）仅在较大的屏幕上正确显示，但在较小的设备上会包裹列。先前示例中引用的值指的是阈值，因为该引导会降低外观以适合可用的屏幕空间。

实际上，这意味着如果您将列col-xs-n设置为即使在很小的屏幕上，它们也将保持正确的外观，直到窗口大小减小到无法正确显示页面的程度为止。这应该意味着宽度为768px或更小的设备应在设计时显示表格，而不是以降级（单列或包裹列的形式）显示。显然，这仍然取决于列的内容，这就是重点。如果页面尝试在小屏幕上并排显示大数据的多列，那么如果您不考虑这些列，这些列自然会以一种可怕的方式包装。因此，根据列中的数据，您可以确定要布局的点，以充分显示内容。

例如，如果您的页面包含三个col-sm-n列，则当页面宽度降至992px以下时，引导程序会将这些列包装为行。这意味着数据仍然可见，但需要垂直滚动才能查看。如果您不希望布局降级，请选择xs（只要您的数据可以在三列的较低分辨率设备上充分显示）

如果数据的水平位置很重要，则应尝试选择较低的粒度值以保持外观。如果位置不太重要，但是页面在所有设备上都必须可见，则应使用更高的值。

如果选择col-lg-n，则各列将正确显示，直到屏幕宽度降至1200像素的xs阈值以下。

设备大小和类前缀：

• 小型设备电话（<768px）- .col-xs-
• 小型设备平板电脑（≥768像素）- .col-sm-
• 中型设备台式机（≥992px）- .col-md-
• 大型设备台式机（≥1200px）- .col-lg-

网格选项：

参考：网格系统

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

引导文档确实对此进行了解释，但是仍然花了我一段时间。当我以两种方式之一向自己解释时，它更有意义：

如果您想到的列是水平开始的，那么可以选择何时堆叠它们。

例如，如果您从以下列开始：ABC

您可以决定何时堆叠它们，如下所示：

一种

乙

C

如果选择col-lg，则当宽度<1200px时，列将堆叠。

如果选择col-md，则当宽度<992px时，列将堆叠。

如果选择col-sm，则宽度小于768px时，列将堆叠。

如果选择col-xs，则列将永远不会堆叠。

另一方面，如果您想到从堆叠开始的列，则可以选择它们在什么时候变为水平的：

如果选择col-sm，则当宽度> = 768px时，列将变为水平。

如果选择col-md，则宽度> = 992px时，列将变为水平。

如果选择col-lg，则当宽度> = 1200px时，列将变为水平。