Twitter Bootstrap 中 col-lg-* 、 col-md-* 和 col-sm-* 有什么区别？
【问题讨论】：
px 的维度。
bootstrap-3 和 bootstrap-4 作为标签，因为它们完全不同
标签： css twitter-bootstrap twitter-bootstrap-3 responsive-design bootstrap-4
2020 年更新...
在 Bootstrap 5（alpha）中有一个新的-xxl- 大小：
col-* - 0 (xs)col-sm-* - 576pxcol-md-* - 768pxcol-lg-* - 992pxcol-xl-* - 1200pxcol-xxl-* - 1400像素
在 Bootstrap 4 中有一个新的-xl- 大小，请参阅this demo。此外，-xs- 中缀已被删除，因此最小的列只是 col-1、col-2..col-12 等。
col-* - 0 (xs)col-sm-* - 576pxcol-md-* - 768pxcol-lg-* - 992pxcol-xl-* - 1200px
此外，Bootstrap 4 包括新的auto-layout columns。这些也有响应断点（col、col-sm、col-md 等），但没有定义 % 宽度。因此，自动布局的列在整行中填充等宽。
Bootstrap 3 网格分为 4 层（或“断点”）...
.col-xs-*）.col-sm-*）.col-md-*）.col-lg-*）。这些网格大小使您能够控制不同宽度的网格行为。不同的层由 CSS media queries 控制。
所以在 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 class="col-sm-3">..</div>
隐含更大的层。因为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-* 类的列将不会垂直堆叠，并在最小的屏幕上继续按比例缩小。
调整浏览器大小using this demo，您将看到网格缩放效果。
【讨论】：
sm 以较窄的宽度保留在列中。亲自尝试：codeply.com/go/LGyFiEJqXq
<div class="col-sm-3">..</div> 与<div class="col-lg-3 col-md-4 col-sm-3">..</div> 相同，而不是<div class="col-lg-3 col-md-3 col-sm-3">..</div>（全部为xx-3）？
<div class="col-lg-3 col-md-3 col-sm-3">..</div> 与 <div class="col-sm-3">..</div> 相同
【讨论】：
请注意 col-sm 如何占据576px 下面的 100% 宽度（换句话说，换行），但 col 没有。您可以在 gif 中注意到顶部中心的当前宽度。
代码来了：
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
默认情况下，Bootstrap 将所有 列(col) 对齐在一个 row 中，宽度相等。在这种情况下，无论屏幕尺寸如何，三个col 将分别占据 100%/3 的宽度。您可以在 gif 中注意到这一点。
现在，如果我们只想每行渲染一列，即为每一列赋予 100% 的宽度，但仅适用于较小的屏幕，该怎么办？现在是col-xx 课程！
我使用 col-sm 是因为我想将列分成 576 像素以下的单独行。这 4 个col-xx 类由 Bootstrap 为不同的显示设备提供，如手机、平板电脑、笔记本电脑、大显示器等。
所以，col-sm 会低于 576 像素，col-md 会低于 768 像素，col-lg 会低于 992 像素，col-xl 会低于 1200 像素
请注意，引导程序 4 中没有
col-xs类。
这几乎是总结。你可以回去工作了。
但还有更多。现在来了 col-* 和 col-xx-* 用于自定义宽度。
请记住，在上面的示例中，我提到 col 或 col-xx 在一行中采用相等的宽度。因此，如果我们想为特定的col 提供更大的宽度，我们可以这样做。
引导行被分成 12 个部分，所以在上面的例子中有 3 个col，所以每个占 12/3 = 4 个部分。您可以将这些部分视为测量宽度的一种方式。
我们也可以这样写成col-*，即col-4：
<div class="row">
<div class="col-4">col</div>
<div class="col-4">col</div>
<div class="col-4">col</div>
</div>
这不会有任何区别，因为默认情况下，引导程序给出的宽度与 col (4 + 4 + 4 = 12) 相等。
但是，如果我们想将 7 个部分分配给第 1 个 col，将 3 个部分分配给第 2 个 col，然后将 2 个部分 (12-7-3 = 2) 分配给第 3 个 col（7+3+2所以总共是 12），我们可以简单地这样做：
<div class="row">
<div class="col-7">col-7</div>
<div class="col-3">col-3</div>
<div class="col-2">col-2</div>
</div>
您还可以自定义col-xx-* 类的宽度。
<div class="row">
<div class="col-sm-7">col-sm-7</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-2">col-sm-2</div>
</div>
它在动作中看起来如何？
如果col 的总和大于 12 怎么办？然后col 将移动/调整到下一行。是的，一行可以有任意数量的列！
<div class="row">
<div class="col-12">col-12</div>
<div class="col-9">col-9</div>
<div class="col-6">col-6</div>
<div class="col-6">col-6</div>
</div>
如果我们希望大屏幕连续显示 3 列，而小屏幕将这些列分成 2 行，该怎么办？
<div class="row">
<div class="col-12 col-sm">col-12 col-sm TOP</div>
<div class="col col-sm">col col-sm</div>
<div class="col col-sm">col col-sm</div>
</div>
【讨论】：
TL;DR
.col-X-Y 表示屏幕尺寸为 X 及以上，拉伸此元素以填充 Y 列。
Bootstrap 为每个 .row 提供 12 列的网格，因此 Y=3 表示宽度=25%。
xs, sm, md, lg 分别是智能手机、平板电脑、笔记本电脑、台式机的尺寸。
在不同的屏幕尺寸上指定不同的宽度是为了让您在较小的屏幕上放大。
示例
<div class="col-lg-6 col-xs-12">
含义：台式机宽度为 50%，移动设备、平板电脑和笔记本电脑宽度为 100%。
【讨论】：
它是用来告诉引导程序根据屏幕大小在一行中放置多少列-
col-xs-2
在超小（xs）屏幕中将仅显示一行中的 2 列，与 sm 定义小屏幕的方式相同，md（中号），lg（大号）， 但根据引导程序较小的第一条规则，如果你提到
xs-col-2 md-col-4
然后将在每行中显示从 xs 到 sm（包含）的屏幕尺寸的 2 列，并在它获得下一个尺寸时发生变化，即 md 到 lg（包含） 为了更好地了解屏幕尺寸，请尝试在 chrome 的开发者模式（ctr+shift+i）中以各种屏幕模式运行它们并尝试各种像素或设备
【讨论】：
一个特殊情况：在学习引导网格系统之前，确保浏览器缩放设置为 100%（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%
Browser 100 percent - elements placed horizontally
Chrome 缩放 175%
【讨论】：
.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-sm-
.col-md-
.col-lg-
网格选项：
参考：Grid System
【讨论】：
来自Twitter Bootstrap documentation：
.col-sm-*,.col-md-*,.col-lg-*.【讨论】：
引导程序docs 确实解释了它，但我还是花了一段时间才明白。当我以两种方式之一向自己解释时，它更有意义：
如果您认为列是从水平方向开始的，那么您可以选择希望它们何时堆叠。
例如，如果您从列开始： 甲乙丙
你决定什么时候应该把它们堆叠成这样：
一个
B
C
如果选择 col-lg，那么当宽度为
如果你选择col-md，那么当宽度为
如果你选择col-sm，那么当宽度为
如果你选择 col-xs，那么列将永远不会堆叠。
另一方面，如果您认为列开始堆叠，那么您可以选择它们在什么位置变为水平：
如果选择 col-sm，则当宽度 >= 768px 时，列将变为水平。
如果选择 col-md，那么当宽度 >= 992px 时，列将变为水平。
如果选择 col-lg，则当宽度 >= 1200px 时，列将变为水平。
【讨论】：
我认为令人困惑的方面是 BootStrap 3 是一个移动优先响应系统，并且未能在 Bootstrap 文档的那部分解释这如何影响 col-xx-n 层次结构。 这使您想知道如果您为较大的设备选择一个值，在较小的设备上会发生什么，并让您想知道是否需要指定多个值。 （你没有）
我会尝试通过说明...来澄清这一点 较小的颗粒类型（xs、sm）尝试在较小的屏幕上保留布局外观，较大的类型（md、lg）将仅在较大的屏幕上正确显示，但会在较小的设备上包裹列。 前面示例中引用的值指的是引导程序降低外观以适应可用屏幕空间的阈值。
这实际上意味着，如果您将列设置为 col-xs-n，那么即使在非常小的屏幕上，它们也将保持正确的外观，直到窗口大小限制到无法正确显示页面. 这应该意味着宽度为 768 像素或更小的设备应该按照您的设计显示您的表格，而不是降级（单列或包裹列形式）。 显然，这仍然取决于列的内容，这就是重点。如果页面试图在一个小屏幕上并排显示多列大数据，那么如果你没有考虑到它，这些列自然会以一种可怕的方式换行。因此，根据列中的数据，您可以决定牺牲布局以充分显示内容的点。
例如如果您的页面包含三个 col-sm-n 列，则当页面宽度低于 992 像素时，引导程序会将这些列包装成行。 这意味着数据仍然可见，但需要垂直滚动才能查看。如果您不希望布局降级，请选择 xs（只要您的数据可以在较低分辨率的设备上以三列充分显示）
如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值以保留视觉性质。如果位置不太重要，但页面必须在所有设备上可见，则应使用更高的值。
如果您选择 col-lg-n，那么列将正确显示，直到屏幕宽度降至 1200 像素的 xs 阈值以下。
【讨论】：