在Twitter Bootstrap中，col-lg-*， col-md-*和col-sm-*有什么区别?
当前回答
它用来告诉引导程序根据屏幕大小在一行中要放置多少列
col-xs-2
在超大(xs)屏幕上，一行只显示2列，就像sm定义的小屏幕一样，md(中等尺寸)，lg(大尺寸)， 但是根据自举法则，如果你提到
xs-col-2 md-col-4
然后，对于屏幕大小从xs到sm(包括)的每一行将显示2列，以及当它获得下一个大小时的变化，即对于md到lg(包括) 为了更好地理解屏幕大小，尝试在chrome的开发者模式(ctr+shift+i)中以各种屏幕模式运行它们，并尝试各种像素或设备
其他回答
引导文档确实解释了这一点，但我还是花了一段时间才弄懂。当我用以下两种方式之一向自己解释时，它更有意义:
如果您认为列从水平开始，那么您可以选择何时希望它们堆叠。
例如，如果你从列开始: A b c
你决定什么时候把它们堆成这样:
A
B
C
如果你选择col-lg，那么当宽度< 1200px时，列将堆叠。
如果你选择col-md，那么当宽度< 992px时，列将堆叠。
如果你选择colm -sm，那么当宽度< 768px时，列将会叠加。
如果你选择colx，那么列永远不会叠加。
另一方面，如果你认为这些列一开始是堆叠的，那么你可以选择它们在什么时候变成水平的:
如果你选择colm -sm，那么当宽度为>= 768px时，列将变成水平的。
如果你选择col-md，那么当宽度为>= 992px时，列将变成水平的。
如果你选择col-lg，那么当宽度为>= 1200px时，列将变成水平的。
.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
它用来告诉引导程序根据屏幕大小在一行中要放置多少列
col-xs-2
在超大(xs)屏幕上，一行只显示2列，就像sm定义的小屏幕一样，md(中等尺寸)，lg(大尺寸)， 但是根据自举法则，如果你提到
xs-col-2 md-col-4
然后，对于屏幕大小从xs到sm(包括)的每一行将显示2列，以及当它获得下一个大小时的变化，即对于md到lg(包括) 为了更好地理解屏幕大小，尝试在chrome的开发者模式(ctr+shift+i)中以各种屏幕模式运行它们，并尝试各种像素或设备
我认为令人困惑的是，BootStrap 3是一个移动优先响应系统，并且没有在BootStrap文档的那部分解释这是如何影响col-xx-n层次结构的。 这使您想知道如果为较大的设备选择一个值，在较小的设备上会发生什么，并使您想知道是否需要指定多个值。(你不)
我想通过声明……来澄清这一点。 低颗粒类型(xs, sm)试图在较小的屏幕上保留布局外观，而较大类型(md,lg)将仅在较大的屏幕上正确显示，但将在较小的设备上包装列。 前面示例中引用的值是指引导程序降低外观以适应可用屏幕属性的阈值。
What this means in practice is that if you make the columns col-xs-n then they will retain correct appearance even on very small screens, until the window drops to a size that is so restrictive that the page cannot be displayed correctly. This should mean that devices that have a width of 768px or less should show your table as you designed it rather than in degraded (single or wrapped column form). Obviously this still depends on the content of the columns and that's the whole point. If the page attempts to display multiple columns of large data, side by side on a small screen then the columns will naturally wrap in a horrible way if you did not account for it. Therefore, depending on the data within the columns you can decide the point at which the layout is sacificed to display the content adequately.
例如，如果你的页面包含三个colm -sm-n列，当页面宽度下降到992px以下时，bootstrap会将列包装成行。 这意味着数据仍然可见，但需要垂直滚动才能查看。如果你不希望你的布局降级，选择xs(只要你的数据可以充分显示在低分辨率设备上的三列)
如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值来保留视觉性质。如果位置不太重要，但页面必须在所有设备上可见，则应该使用更高的值。
如果您选择col-lg-n，那么列将正确显示，直到屏幕宽度低于xs阈值1200px。
更新2020…
引导5
在Bootstrap 5 (alpha)中有一个新的-xxl- size:
col-* - 0 （xs） col-sm-* - 576px 上校-MD-* - 768px col-lg-* - 992px col-xl-* - 1200px 嗡��
引导5网格演示
引导4
在Bootstrap 4中有一个新的-xl- size，请看这个演示。同时-xs-中缀也被删除了，所以最小的列就是col-1, col-2..col-12等等. .
col-* - 0 （xs） col-sm-* - 576px 上校-MD-* - 768px col-lg-* - 992px col-xl-* - 1200px
引导4网格演示
此外，Bootstrap 4还包括新的自动布局列。它们也有响应断点(col、col-sm、col-md等)，但没有定义%宽度。因此，自动布局列在行中填充的宽度相等。
引导3
Bootstrap 3网格分为4层(或“断点”)…
小号(适用于智能手机.col-xs-*) 小(用于片剂。col-sm-*) 中等(适用于笔记本电脑。col-md-*) Large(用于笔记本/台式机.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级= >“col-sm-3。< / div >
更大的层是隐含的。因为col-sm-3意味着在sm-and-up上有3个单位，除非特别被使用不同尺寸的更大的层覆盖。
Xs(默认)>被sm覆盖>被md覆盖>被lg覆盖
组合这些类以在不同的网格大小上使用更改列宽度。这将创建一个响应式布局。
<div class="col- md3 col-sm-6">..</div>
sm, md和lg网格都将垂直“堆叠”在小于768像素的屏幕/视口上。这就是xs网格的位置。使用colx -xs-*类的列将不会垂直堆叠，并在最小的屏幕上继续缩小。
使用这个演示来调整浏览器的大小，你会看到网格缩放效果。
This article explains more about how the Bootstrap grid
