[英]What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
Twitter Bootstrap 中的col-lg-* 、 col-md-*和col-sm-* col-md-*什么区别？
2020 年更新...
在Bootstrap 5 (alpha) 中有一个新的-xxl-大小：
col-* - 0 (xs)
col-sm-* sm- col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
col-xxl-* - 1400px
在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 包括新的自动布局列。 它们也有响应断点（ col 、 col-sm 、 col-md等），但没有定义 % 宽度。 因此，自动布局列在整个行中填充相等的宽度。
Bootstrap 3网格有4层（或“断点”）......
.col-xs-* ）.col-sm-* ）.col-md-* ）.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 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 网格如何
bootstrap文档确实解释了它，但我还是花了一段时间才弄明白。 当我用以下两种方式之一向自己解释时，它会更有意义：
如果您考虑从水平方向开始的列，那么您可以选择希望它们何时堆叠。
例如，如果您从列开始：ABC
您决定何时应该将它们堆叠成这样：
一
乙
丙
如果选择 col-lg，则当宽度 < 1200px 时，列将堆叠。
如果选择 col-md，则当宽度 < 992px 时，列将堆叠。
如果选择 col-sm，则当宽度 < 768px 时，列将堆叠。
如果您选择 col-xs，则列将永远不会堆叠。
另一方面，如果您认为列开始堆叠，那么您可以选择它们在什么时候变为水平：
如果选择 col-sm，则当宽度 >= 768px 时，列将变为水平。
如果选择 col-md，则当宽度 >= 992px 时，列将变为水平。
如果选择 col-lg，则当宽度 >= 1200px 时，列将变为水平。
.col-sm-* ,.col-md-* ,.col-lg-* 。我认为这个令人困惑的方面是 BootStrap 3 是一个移动优先响应系统，并且未能解释这如何影响 Bootstrap 文档那部分中的 col-xx-n 层次结构。 这让您想知道如果您为较大的设备选择一个值，在较小的设备上会发生什么，并让您想知道是否需要指定多个值。 （你没有）
我将尝试通过声明...来澄清这一点...较低的颗粒类型（xs，sm）尝试在较小的屏幕上保留布局外观，而较大的类型（md，lg）将仅在较大的屏幕上正确显示，但会在较小的设备上包装列。 前面示例中引用的值指的是引导程序降低外观以适应可用屏幕空间的阈值。
这在实践中意味着，如果您将列设置为 col-xs-n，那么即使在非常小的屏幕上它们也将保持正确的外观，直到窗口缩小到限制到页面无法正确显示的大小为止。 这应该意味着宽度为 768 像素或更小的设备应该按照您设计的方式显示您的表格，而不是降级（单列或环绕列的形式）。 显然，这仍然取决于列的内容，这就是重点。 如果页面试图在小屏幕上并排显示多列大数据，那么如果您没有考虑到这一点，这些列自然会以可怕的方式换行。 因此，根据列中的数据，您可以决定牺牲布局以充分显示内容的点。
例如，如果您的页面包含三个 col-sm-n 列，则当页面宽度低于 992px 时，引导程序会将列包装成行。 这意味着数据仍然可见，但需要垂直滚动才能查看。 如果您不希望布局降级，请选择 xs（只要您的数据可以在较低分辨率的设备上以三列形式充分显示）
如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值以保留视觉性质。 如果位置不太重要，但页面必须在所有设备上都可见，则应使用更高的值。
如果您选择 col-lg-n，则列将正确显示，直到屏幕宽度低于 1200 像素的 xs 阈值。
请注意col-sm如何占据576px以下的 100% 宽度（ 576px分成新行）但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>
引导通过在单排具有相等宽度的默认对齐所有的列（列）。 在这种情况下，无论屏幕大小如何，三col都将占据 100%/3 的宽度。 你可以在gif中注意到这一点。
现在，如果我们只想渲染每行一列，即为每列提供 100% 的宽度但仅适用于较小的屏幕怎么办？ 现在是col-xx类！
我使用col-sm是因为我想将列分成 576px 以下的单独行。 这 4 个col-xx类由 Bootstrap 提供，用于不同的显示设备，如手机、平板电脑、笔记本电脑、大型显示器等。
因此， col-sm将低于 576px， col-md将低于 768px， col-lg将低于 992px， col-xl将低于 1200px
请注意，引导程序 4 中没有
col-xs类。
这几乎是总结。 你可以回去工作了。
但还有更多内容。 现在是用于自定义宽度的col-*和col-xx-* 。
记得在上面的例子中我提到col或col-xx在一行中采用相等的宽度。 因此，如果我们想为特定的col提供更多宽度，我们可以这样做。
Bootstrap 行被分成 12 部分，所以在上面的例子中有 3 个col所以每个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 部分分配给 1st col ，将 3 部分分配给 2nd col并将其余 2 部分 (12-7-3 = 2) 分配给第三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>
你可以在这里玩： https : //jsfiddle.net/JerryGoyal/6vqno0Lm/
TL; 博士
.col-XY表示在屏幕尺寸 X 及以上时，拉伸此元素以填充 Y 列。
Bootstrap 提供每.row 12 列的网格，因此 Y=3 表示宽度=25%。
xs, sm, md, lg分别是智能手机、平板电脑、笔记本电脑、台式机的尺寸。
在不同屏幕尺寸上指定不同宽度的目的是让您在较小的屏幕上放大。
示例
<div class="col-lg-6 col-xs-12">
含义：台式机上的宽度为 50%，移动设备、平板电脑和笔记本电脑上的宽度为 100%。
设备尺寸和类前缀：
.col-xs-.col-sm-.col-md-.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%（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%
Chrome 缩放 175%
好吧，它的Bootstrap Grid Divisions用于设备响应。
.col-xs-$ Extra Small Screen Phones Less than 768px
.col-sm-$ Small Devices[Tabs] Tablets 768px and Up
.col-md-$ Medium Devices[Laptop screen] 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
然后每行将显示 2 列，用于从 xs 到 sm（包括）的屏幕尺寸，并在获得下一个尺寸时更改，即 md 到 lg（包括）以更好地了解屏幕尺寸尝试在各种屏幕模式下运行它们chrome 的开发者模式（ctr+shift+i）并尝试各种像素或设备
radio-inline应该仅适用于col-lg-*，col-md-*，col-sm- *，而不适用于col-xs- *
[英]radio-inline should apply only on col-lg-*, col-md-*, col-sm-* but, not on col-xs-*
对 class 的所有实例使用相同的 col-md-* 和 col-lg-*
[英]Use same col-md-* and col-lg-* for all instances of the class
在引导程序中，如果未指定col-md和col-lg，是否将class =“ col-sm-4”视为class =“ col-sm-4 col-md-4 col-lg-4”？
[英]In bootstrap, Is class=“col-sm-4” will be considered as class=“col-sm-4 col-md-4 col-lg-4”, if col-md and col-lg are not specied?
Bootstrap 3.0 col-sm-offset-1正在影响md和lg设备
[英]Bootstrap 3.0 col-sm-offset-1 is affecting md and lg devices
如何在具有4个img的引导程序（col xs-12 col-sm-6 col-md-2 col-lg-2）中居中？
[英]How to center a row in bootstrap(col xs-12 col-sm-6 col-md-2 col-lg-2), that has 4 imgs?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.