.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
221
TL;DR
.col-X-Y 表示屏幕尺寸为X及以上，拉伸此元素以填充Y列 .
Bootstrap每 .row 提供一个12列的网格，因此Y = 3表示宽度= 25％ .
xs, sm, md, lg 分别是智能手机，平板电脑，笔记本电脑，台式机的尺寸 .
在不同的屏幕尺寸上指定不同宽度的关键是让你在较小的屏幕上做大 .
Example
<div class="col-lg-6 col-xs-12">
含义：桌面上的宽度为50％，移动，平板电脑和笔记本电脑的宽度为100％ .
1
一个特例：在学习bootstrap网格系统之前，请确保将浏览器缩放设置为100％（百分之百） . 例如：如果屏幕分辨率为（1600px x 900px）且浏览器缩放率为175％，则将堆叠“bootstrap-ped”元素 .
9 回答
TL;DR
.col-X-Y表示屏幕尺寸为X及以上，拉伸此元素以填充Y列 .Bootstrap每
.row提供一个12列的网格，因此Y = 3表示宽度= 25％ .xs, sm, md, lg分别是智能手机，平板电脑，笔记本电脑，台式机的尺寸 .在不同的屏幕尺寸上指定不同宽度的关键是让你在较小的屏幕上做大 .
Example
含义：桌面上的宽度为50％，移动，平板电脑和笔记本电脑的宽度为100％ .
一个特例：在学习bootstrap网格系统之前，请确保将浏览器缩放设置为100％（百分之百） . 例如：如果屏幕分辨率为（1600px x 900px）且浏览器缩放率为175％，则将堆叠“bootstrap-ped”元素 .
HTML
Chrome zoom 100%
Browser 100 percent - elements placed horizontally
Chrome zoom 175%
Browser 175 percent - stacked elements
好吧它用于告诉bootstrap根据屏幕大小连续放置多少列 -
在超小（xs）屏幕中连续只显示2列，与sm定义小屏幕，md（中等大小），lg（大尺寸）的方式相同，但如果你提到的话，根据bootstrap较小的第一规则
然后每行显示2列，用于屏幕尺寸从xs到sm（包括），当它获得下一个尺寸时更改，即md到lg（包括）以更好地理解屏幕尺寸尝试在各种屏幕模式下运行它们chrome的开发者模式（ctr shift i）并尝试各种像素或设备
Updated 2018...
Bootstrap 3 网格分为4层（或"breakpoints"）......
超小（适用于智能手机
.col-xs-*）小（适用于平板电脑
.col-sm-*）中（适用于笔记本电脑
.col-md-*）大（适用于笔记本电脑/台式机
.col-lg-*） .这些网格大小使您可以控制不同宽度的网格行为 . 不同的层由CSS media queries控制 .
所以在Bootstrap的12列网格中......
col-sm-3是典型 small 器件宽度（> 768像素）的12列宽（25％）中的3列col-md-3是典型 medium 器件宽度（> 992像素）的12列宽（25％）中的3列The smaller tier (xs, sm or md) also defines the size for larger screen widths . 因此，对于所有层上的相同大小的列，只需设置最小视口的宽度...
<div class="col-lg-3 col-md-3 col-sm-3">..</div>是一样的，<div class="col-sm-3">..</div>较大的层是 implied. 因为
col-sm-3表示3 units on sm-and-up，除非被使用不同大小的较大层特别覆盖 .xs（默认值）>被_715649覆盖_>被_715650覆盖>被_715651覆盖Combine the classes to use change column widths on different grid sizes . 这会创建一个响应式布局 .
<div class="col-md-3 col-sm-6">..</div>sm，md和lg网格将全部"stack"垂直于屏幕/视口小于768像素 . 这是xs网格适合的位置 . 使用col-xs-*类的列不会垂直堆叠，并且会在最小的屏幕上继续缩小 .调整浏览器的大小using this demo，您将看到网格缩放效果 .
在 Bootstrap 4 中有一个新的
-xl-大小，请参阅this demo . 也是 -xs- infix has been removed ，所以最小的列只是col-1，col-2..col-12等 .col-*- 0（xs）col-sm-*- 576pxcol-md-*- 768pxcol-lg-*- 992pxcol-xl-*- 1200pxBootstrap 4 Grid Demo
此外，这篇文章解释more about the Bootstrap grid
引导程序docs确实解释了它，但它仍然需要我一段时间才能得到它 . 当我以两种方式之一向自己解释时，它更有意义：
If you think of the columns starting out horizontally, then you can choose when you want them to stack .
例如，如果从列开始：A B C.
您决定何时堆叠如下：
一个
乙
C
如果选择col-lg，则当宽度<1200px时，列将堆叠 .
如果选择col-md，则当宽度<992px时，列将堆叠 .
如果选择col-sm，则当宽度<768px时，列将堆叠 .
如果选择col-xs，那么列将永远不会堆叠 .
On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal ：
如果选择col-sm，则当宽度> = 768px时，列将变为水平 .
如果选择col-md，则当宽度> = 992px时，列将变为水平 .
如果选择col-lg，则当宽度> = 1200px时，列将变为水平 .
来自Twitter Bootstrap documentation：
小格（≥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时，bootstrap会将列包装成行 . 这意味着数据仍然可见，但需要垂直滚动才能查看 . 如果您不希望布局降级，请选择xs（只要您的数据可以在三列中的较低分辨率设备上充分显示）
如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值保留视觉性质 . 如果位置不太重要但页面必须在所有设备上都可见，则应使用更高的值 .
如果选择col-lg-n，则列将正确显示，直到屏幕宽度低于xs阈值1200px .
Device Sizes and class prefix:
超小型设备手机（<768px） -
.col-xs-小型设备平板电脑（≥768px） -
.col-sm-中型设备台式机（≥992px） -
.col-md-大型设备台式机（≥1200px） -
.col-lg-Grid options:
参考：Grid System