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

Question

和Twitter Bootstrapcol-lg-*之间有什么区别？col-md-*col-sm-*

Answer 1

2020年更新...

引导程序 5

在Bootstrap 5 (alpha) 中有一个新的-xxl-尺寸：

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

Bootstrap 5 网格演示

---

引导程序 4

在Bootstrap 4中有一个新的-xl-大小，请参阅这个演示。中-xs-缀也被删除了，所以最小的列是简单的col-1，col-2.. col-12，等等。

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

Bootstrap 4 网格演示

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

---

引导程序 3

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, 除非被使用不同大小的更大层特别覆盖。

xs（默认） > 被覆盖sm> 被覆盖md> 被覆盖lg

---

组合这些类以在不同的网格大小上使用更改列宽。这将创建一个响应式布局。

<div class="col-md-3 col-sm-6">..</div>

,sm和网格将全部垂直“堆叠”在小于 768 像素的屏幕/视口上md。lg这是xs网格适合的地方。使用col-xs-*类的列不会垂直堆叠，并在最小的屏幕上继续按比例缩小。

使用此演示调整浏览器大小，您将看到网格缩放效果。

---

本文解释了有关 Bootstrap 网格的更多信息

Answer 2

引导文档确实解释了它，但我仍然需要一段时间才能得到它。当我以两种方式之一向自己解释时，它更有意义：

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

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

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

一种

乙

C

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

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

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

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

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

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

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

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

Answer 3

来自Twitter Bootstrap 文档：

• 小网格 (≥ 768px) = .col-sm-*,
• 中等网格 (≥ 992px) = .col-md-*,
• 大网格 (≥ 1200px) = .col-lg-*.

Answer 4

让我们简化 Bootstrap！

注意col-sm如何占据下面的 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>

默认情况下，Bootstrap 将单行中的所有列( col)以相等的宽度对齐。在这种情况下，无论屏幕尺寸如何，三个都将占据 100%/3 宽度。您可以在 gif 中注意到这一点。col

现在，如果我们只想每行渲染一列，即为每列提供 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所以每个部分需要 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）。

但是，如果我们想给 1st 7 个部分，col给 2nd 3 个部分col，其余 2 个部分 (12-7-3 = 2) 到 3rd 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/

Answer 5

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

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

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

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

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

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

Answer 6

TL;博士

.col-X-Y表示在屏幕尺寸 X 及以上，拉伸此元素以填充 Y 列。

Bootstrap 提供每 12 列的网格.row，因此 Y=3 表示宽度=25%。

xs, sm, md, lg分别是智能手机、平板电脑、笔记本电脑、台式机的尺寸。

在不同的屏幕尺寸上指定不同的宽度是为了让您在较小的屏幕上放大。

例子

<div class="col-lg-6 col-xs-12">

含义：台式机宽度为 50%，手机、平板电脑和笔记本电脑宽度为 100%。

Answer 7

设备尺寸和类别前缀：

• 超小型设备电话 (<768px) -.col-xs-
• 小型设备 平板电脑 (≥768px) -.col-sm-
• 中型设备 台式机 (≥992px) -.col-md-
• 大型设备 台式机 (≥1200px) -.col-lg-

网格选项：

参考：网格系统

Answer 8

.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 

Answer 9

一个特殊情况：在学习引导网格系统之前，确保浏览器缩放设置为 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%

浏览器 100% - 水平放置的元素

铬缩放 175%

浏览器 175% - 堆叠元素

Answer 10

我认为这张图片很好地理解了这个概念！

如需更详细的了解，请访问以下链接：

https://getbootstrap.com/docs/3.4/css/

Answer 11

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

col-xs-2

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

xs-col-2 md-col-4

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