Bootstrap 中 col-lg-*、col-md-* 和 col-sm-* 有什么区别？

2020年更新...

引导程序 5

在 Bootstrap 5 (alpha) 中有一个新的 -xxl- 大小：

col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px
col-xxl-* - 1400px

Bootstrap 5 Grid Demo

引导程序 4

在 Bootstrap 4 中有一个新的 -xl- 大小，请参阅 this demo。此外，-xs- 中缀已被删除，因此最小的列只是 col-1、col-2.. col-12 等。

col-* - 0 (xs)
col-sm-* - 576px
col-md-* - 768px
col-lg-* - 992px
col-xl-* - 1200px

Bootstrap 4 Grid Demo

此外，Bootstrap 4 包括新的 auto-layout columns。这些也有响应断点（col、col-sm、col-md 等），但没有定义 % 宽度。因此，自动布局的列在整个行中填充等宽。

引导程序 3

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）还定义了较大屏幕宽度的尺寸。因此，对于所有层上的 same 大小列，只需设置最小视口的宽度...

<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，您将看到网格缩放效果。

这篇文章解释了 more about how the Bootstrap grid

---

引导程序 docs 确实解释了它，但我还是花了一段时间才明白。当我以两种方式之一向自己解释时，它更有意义：

如果您认为列是从水平方向开始的，那么您可以选择希望它们何时堆叠。

例如，如果您从列开始：ABC

您决定何时应该将它们堆叠成这样：

一个

乙

C

如果您选择 col-lg，那么当宽度 < 1200px 时，列将堆叠。

如果选择 col-md，那么当宽度 < 992px 时，列将堆叠。

如果您选择 col-sm，那么当宽度 < 768px 时，列将堆叠。

如果您选择 col-xs，那么列将永远不会堆叠。

另一方面，如果您认为列开始堆叠，那么您可以选择它们在什么位置变为水平：

如果您选择 col-sm，那么当宽度 >= 768px 时，列将变为水平。

如果您选择 col-md，那么当宽度 >= 992px 时，列将变为水平。

如果您选择 col-lg，那么当宽度 >= 1200px 时，列将变为水平。

---

从 Twitter Bootstrap documentation：

小网格 (≥ 768px) = .col-sm-*,

中等网格 (≥ 992px) = .col-md-*,

大网格（≥ 1200px）= .col-lg-*。

---

让我们简化 Bootstrap！

https://i.stack.imgur.com/OcO9f.gif

注意 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 类。

https://i.stack.imgur.com/a5Xmp.png

这几乎是总结。你可以回去工作了。

但还有更多。现在是用于自定义宽度的 col-* 和 col-xx-*。

请记住，在上面的示例中，我提到 col 或 col-xx 在一行中采用相等的宽度。因此，如果我们想为特定的 col 提供更多宽度，我们可以这样做。

Bootstrap 行被分成 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)。

但是，如果我们想给第 1 个 col 7 个部分，给第 2 个 col 3 个部分，剩下 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>

https://i.stack.imgur.com/XZQbf.png

您还可以自定义 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>

https://i.stack.imgur.com/VWAg1.png

它在动作中看起来如何？

https://i.stack.imgur.com/GqWcC.gif

如果 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>

https://i.stack.imgur.com/x323R.png

如果我们希望大屏幕连续显示 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://i.stack.imgur.com/V6F7t.gif

你可以在这里玩：https://jsfiddle.net/JerryGoyal/6vqno0Lm/

---

我认为这令人困惑的方面是 BootStrap 3 是一个移动优先响应系统，并且未能解释这如何影响 Bootstrap 文档的那部分中的 col-xx-n 层次结构。这使您想知道如果您为较大的设备选择一个值，在较小的设备上会发生什么，并让您想知道是否需要指定多个值。 （你没有）

我会尝试通过声明来澄清这一点......较低粒度类型（xs，sm）尝试在较小的屏幕上保留布局外观，较大的类型（md，lg）将仅在较大的屏幕上正确显示，但会在较小的设备上包装列。前面示例中引用的值指的是引导程序降低外观以适应可用屏幕空间的阈值。

这在实践中意味着，如果您将列设置为 col-xs-n，那么即使在非常小的屏幕上，它们也将保持正确的外观，直到窗口大小限制到无法正确显示页面为止。这应该意味着宽度为 768 像素或更小的设备应该按照您的设计显示您的表格，而不是降级（单列或包裹列形式）。显然，这仍然取决于列的内容，这就是重点。如果页面试图在一个小屏幕上并排显示多列大数据，那么如果你不考虑它，这些列自然会以一种可怕的方式换行。因此，根据列中的数据，您可以决定牺牲布局以充分显示内容的点。

例如，如果您的页面包含三个 col-sm-n 列，则当页面宽度低于 992 像素时，引导程序会将这些列包装成行。这意味着数据仍然可见，但需要垂直滚动才能查看。如果您不希望您的布局降级，请选择 xs（只要您的数据可以在较低分辨率的设备上以三列充分显示）

如果数据的水平位置很重要，那么您应该尝试选择较低的粒度值以保留视觉性质。如果位置不太重要，但页面必须在所有设备上可见，则应使用更高的值。

如果您选择 col-lg-n，那么这些列将正确显示，直到屏幕宽度降至 1200 像素的 xs 阈值以下。

---

TL;博士

.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%。

---

设备尺寸和类别前缀：

超小型设备电话 (<768px) - .col-xs-

小型设备 平板电脑 (≥768px) - .col-sm-

中型设备桌面 (≥992px) - .col-md-

大型设备桌面 (≥1200px) - .col-lg-

网格选项：

https://i.stack.imgur.com/nyqbS.png

参考：Grid System

---

.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>

铬缩放 100%

Browser 100 percent - elements placed horizontally

铬缩放 175%

Browser 175 percent - stacked elements

---

好吧，它用于告诉引导程序根据屏幕大小在一行中放置多少列-

col-xs-2

将在超小（xs）屏幕中连续显示 2 列，与 sm 定义小屏幕、md（中型）、lg（大型）的方式相同，但根据引导程序较小的第一条规则，如果您提到

xs-col-2 md-col-4

然后将在每行中显示从 xs 到 sm（包括）的屏幕尺寸的 2 列，并在它获得下一个尺寸时发生变化，即 md 到 lg（包括）为了更好地理解屏幕尺寸尝试在各种屏幕模式下运行它们chrome的开发者模式（ctr+shift+i），尝试各种像素或设备

---