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

2019年更新...

Bootstrap 3网格分为4层(或"断点")...

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

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

因此，在Bootstrap的12列网格中...

col-sm-3在典型的小型设备宽度(> 768像素)上为12列宽(25％)中的3列

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

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

..与，

..

隐含更大的层。因为col-sm-3表示3 units on sm-and-up，除非被使用不同大小的较大层特别覆盖。

xs(默认)>被sm覆盖>被md覆盖>被lg覆盖

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

..

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

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

引导程序4

Bootstrap 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等。)，但没有定义宽度百分比。因此，自动布局列在行中的宽度相等。

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

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

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

例如，如果您从列开始：
A B C

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

一个

乙

C

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

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

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

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

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

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

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

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

从Twitter Bootstrap文档中：

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

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

我会尝试通过阐明...
较低的纹理类型(xs，sm)尝试在较小的屏幕上保留布局外观，而较大的类型(md，lg)仅在较大的屏幕上可以正确显示，但会在较小的设备上包裹列。
先前示例中引用的值是指阈值，因为该引导会降低外观以适合可用的屏幕空间。

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

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

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

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

设备大小和类前缀：

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

网格选项：

参考：网格系统

TL; DR

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

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

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

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

例

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

请注意，col-sm如何占据576px下100％的宽度(换句话说，会换成新行)，而col没有。您可以在gif的顶部中心处注意到当前宽度。

代码如下：

Bootstrap默认情况下将单行中的所有列(col)对齐并具有相等的宽度。在这种情况下，无论屏幕大小如何，三个col都将占据100％/ 3的宽度。您可以在gif中注意到这一点。

现在，如果我们只希望每行仅渲染一列，即为每一列提供100％的宽度，但仅适用于较小的屏幕呢？现在是col-xx类！

我使用col-sm是因为我想将这些列分成576px以下的单独行。 Bootstrap为不同的显示设备(如手机，平板电脑，笔记本电脑，大型显示器等)提供了这4个col-xx类。

因此，col-sm会跌破576px，col-md会跌破768px，col-lg会跌破992px，col-xl会跌破1200px

Note that there's no col-xs class in bootstrap 4.

这差不多总结了。你可以回去上班了。

但是还有更多的东西。现在是col-*和col-xx-*用于自定义宽度。

请记住，在上面的示例中，我提到col或col-xx在一行中具有相同的宽度。因此，如果我们想给特定的col更大的宽度，我们可以这样做。

引导行分为12个部分，因此在上面的示例中有3个col，因此每个占12/3 = 4个部分。您可以将这些部分视为测量宽度的一种方式。

我们也可以将其写为col-*格式，即col-4，如下所示：

而且这没有什么区别，因为默认情况下引导程序会给col相等的宽度(4 + 4 + 4 = 12)。

但是，如果我们要对第一个col分配7个部分，对第二个col分配3个部分，而对第三个col分配2个部分(12-7-3 = 2)(7 + 3 + 2)，那么总计为12)，我们可以简单地做到这一点：

并且您还可以自定义col-xx-*类的宽度。

动作效果如何？

如果col的总和大于12怎么办？然后col将移动/调整到下一行。是的，一行可以有任意数量的列！

如果我们要在大屏幕上连续3列，但在小屏幕上将这些列分成2行怎么办？

You can play around here: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

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

的HTML

铬变焦100％

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

镀铬变焦175％

浏览器175％-堆叠式元素

我认为这张图片很好理解了这个概念！

要了解更多详细信息，请通过以下链接进入：

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

好了，它用来告诉引导程序，根据屏幕大小，一行中将放置几列-

会在sm(xs)屏幕中连续显示两列，就像sm定义了一个小屏幕一样(md(中型)，lg(大号)，
但是根据引导较小的第一条规则，如果您提到

那么每行将显示2列，用于从xs到sm(包括)的屏幕尺寸，并在屏幕获得下一个尺寸时更改，即md直到lg(包括)
为了更好地了解屏幕尺寸，请尝试在chrome开发人员模式下(ctr + shift + i)在各种屏幕模式下运行它们，并尝试各种像素或设备