Bootstrap中col-lg- *，col-md- *和col-sm- *有什么不同？
Twitter Bootstrap 3中的col-lg-* ， col-md-*和col-sm-* col-md-*什么区别？
引导3网格进入4层（或“断点”）…
- 超小（智能手机
.col-xs-*） - 小（对于平板电脑
.col-sm-*） - 中（笔记本电脑
.col-md-*） - 大（对于笔记本电脑/台式机
.col-lg-*）。
这些网格大小使您能够控制不同宽度的网格行为。 不同的层次由CSS 媒体查询控制。
所以在Bootstrap的12列网格中…
在典型的小型设备宽度（> 768像素）上， col-sm-3是12列宽（25％）中的3列，
col-md-3在典型的中等设备宽度（> 992像素）上是12列宽（25％）中的3列，
您设置的最小层（ 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覆盖
组合类以使用不同网格大小的更改列宽 。 这创build了一个响应式布局。
<div class="col-md-3 col-sm-6">..</div>
sm ， md和lg网格将全部在小于768像素的屏幕/视口上垂直堆叠。 这是xs网格适合的地方。使用col-xs-*类的col-xs-* 不会垂直堆叠， 而是继续在最小的屏幕上缩小。
使用这个演示调整您的浏览器的大小，你会看到网格缩放效果。
引导程序4的更新有一个新的-xl-大小，请参阅此演示 。 此外， -xs-缀已被删除，所以最小的列只是col-1 ， col-2 .. col-12等。
Bootstrap 4 Beta网格演示
另外，这篇文章更多地介绍了Bootstrap网格
bootstrap 文件解释它，但它仍然花了我一段时间才能得到它。 当我用以下两种方式之一向我自己解释时，它更有意义：
如果您想到水平列开始，那么您可以select何时想要它们堆叠 。
例如，如果您从列开始：ABC
你决定什么时候应该堆叠成这样：
一个
乙
C
如果selectcol-lg，那么当宽度<1200px时，这些列将堆叠。
如果select了col-md，那么当宽度<992px时，这些列将堆叠起来。
如果selectcol-sm，那么当宽度<768px时，这些列将堆叠。
如果您selectcol-xs，那么列将永远不会堆叠。
另一方面，如果你想起堆叠起来的列，那么你可以select在什么时候变成水平的 ：
如果您selectcol-sm，那么当宽度> = 768px时，这些列将变为水平。
如果selectcol-md，那么当宽度大于等于992px时，这些列将变为水平。
如果selectcol-lg，那么当宽度> = 1200px时，这些列将变为水平。
从Twitter Bootstrap文档 ：
- 小格（≥768px）=
.col-sm-*， - 中等网格（≥992px）=
.col-md-*， - 大网格（≥1200px）=
.col-lg-*。
我认为这种混淆的方面是BootStrap 3是一个移动的第一响应系统，并没有解释这是如何影响Bootstrap文档那部分的col-xx-n层次结构的。 这让你想知道如果你为较大的设备select一个值，并且让你想知道是否需要指定多个值，小设备上会发生什么。 （你不）
我试图澄清这一点，说明…更低的粮食types（xs，sm）尝试保留小屏幕上的布局外观和更大的types（md，lg）只能在较大的屏幕上正确显示，但将包装较小的设备列。 前面例子中引用的值是指引导程度降低外观以适应可用屏幕状态的阈值。
这实际上意味着，如果你制作列col-xs-n，那么即使在非常小的屏幕上，它们也会保持正确的外观，直到窗口的大小限制到无法正确显示页面。 这应该意味着宽度为768px或更小的设备应该按照您devise的方式显示您的表格，而不是降级（单个或包装的列forms）。 显然这仍然取决于列的内容，这就是整个观点。 如果页面试图在一个小屏幕上并排显示多列大数据，那么如果没有考虑到这些列，那么这些列自然会以可怕的方式包装起来。 因此，根据列中的数据，您可以决定布局的神圣点以充分显示内容。
例如，如果页面包含三个col-sm-n列，则当页面宽度降至992px以下时，bootstrap会将列包装成行。 这意味着数据仍然可见，但需要垂直滚动来查看。 如果您不希望布局降级，请selectxs（只要您的数据可以在三列中的较低分辨率设备上充分显示）
如果数据的水平位置很重要，那么您应该尝试select较低的粒度值来保留视觉特性。 如果位置不重要，但页面必须在所有设备上可见，则应使用较高的值。
如果您selectcol-lg-n，则列将正确显示，直到屏幕宽度下降到低于1200像素的xs阈值。
设备大小和类别前缀：
- 超小设备手机（<768px） –
.col-xs- - 小型设备平板电脑（≥768px） –
.col-sm- - 中等设备台式机（≥992px） –
.col-md- - 大型设备台式机（≥1200像素） –
.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
一个特殊情况：在学习引导网格系统之前，确保浏览器缩放设置为100％（百分之百）。 例如：如果屏幕分辨率是（1600px x 900px），浏览器缩放是175％，那么“bootstrap-ped”元素将被堆叠。
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>
Chrome变焦100％
浏览器100％ – 水平放置的元素
Chrome浏览器缩放175％
浏览器175％ – 堆叠元素
