col。有什么区别？
Twitter Bootstrap中的col-lg-* ， col-md-*和col-sm-* col-md-*什么区别？
2018年更新...
引导3网格进入4层（或“断点”）...
.col-xs-* ） .col-sm-* ） .col-md-* ） .col-lg-* ）。 这些网格大小使您能够控制不同宽度的网格行为。 不同的层级由CSS媒体查询控制。
所以在Bootstrap的12列网格中...
在典型的小型设备宽度（> 768像素）上， col-sm-3是12列宽（25％）中的3列
在典型的中等设备宽度（> 992像素）上， col-md-3是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 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-*类的col-xs-*不会垂直堆叠，而是继续在最小的屏幕上缩小。
使用此演示调整浏览器大小，您将看到网格缩放效果。
在Bootstrap 4中有一个新的-xl-大小，请参阅此演示。 此外， -xs-缀已被删除 ，因此最小的列仅为col-1 ， col-2 .. col-12等。
col-* - 0（xs）
col-sm-* sm- col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
Bootstrap 4网格演示
另外，这篇文章更多地介绍了Bootstrap网格
Bootstrap文档可以解释它，但它仍然花了我一段时间才得到它。 当我用以下两种方式之一向我自己解释时，它更有意义：
如果您想到水平开始的列，那么您可以选择何时希望它们堆叠 。
例如，如果您从列开始：ABC
你决定什么时候应该堆叠成这样：
一个
乙
C
如果您选择col-lg，那么当宽度<1200像素时，这些列将堆叠。
如果选择col-md，那么当宽度<992px时，列将堆叠。
如果选择col-sm，那么当宽度<768px时，这些列将堆叠。
如果您选择col-xs，那么列将永远不会堆叠。
另一方面，如果你想到开始叠加的列，那么你可以选择它们变成水平的点 ：
如果选择col-sm，那么当宽度> = 768px时，这些列将变为水平。
如果选择了col-md，那么当宽度大于992px时，这些列将变为水平。
如果选择col-lg，那么当宽度大于等于1200px时，这些列将变为水平。
从Twitter Bootstrap文档：
.col-sm-* ， .col-md-* ， .col-lg-* 。 上一篇: What is the difference among col
下一篇: What is Bootstrap?