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

是什么之间的差异col-lg-*，col-md-*并col-sm-*在Twitter的引导？

2019年更新...

所述自举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，md而lg电网将在屏幕上/视所有“堆栈”纵向比768少。这是xs网格适合的地方。使用col-xs-*类的列将不会垂直堆叠，并且会继续在最小的屏幕上按比例缩小。

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

引导程序4

在引导4有一个新的-xl-大小，请参阅该演示。另外，-xs-缀已经被移除，所以最小的列是简单的col-1，col-2.. col-12等。

col-*-0（xs）
col-sm-*-576px
col-md-*-768px
col-lg-*-992px
col-xl-*-1200px

Bootstrap 4网格演示

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

本文介绍了有关Bootstrap网格的更多信息

引导文档确实对此进行了解释，但是仍然花了我一段时间。当我以两种方式之一向自己解释时，它更有意义：

如果您想到的列是水平开始的，那么可以选择何时堆叠它们。

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

您可以决定何时堆叠它们，如下所示：

一个

乙

C

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

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

如果选择col-sm，则宽度小于768px时，列将堆叠。

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

另一方面，如果您考虑从堆叠开始的列，则可以选择它们在何时变为水平：

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

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

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

从Twitter Bootstrap文档中：

• 小网格（≥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，则列将正确显示，直到屏幕宽度降至1200像素的xs阈值以下。

设备大小和类前缀：

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

网格选项：

参考：网格系统

TL; DR

.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％宽度。

.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％（百分之百）。例如：如果屏幕分辨率为（1600px x 900px），浏览器缩放比例为175％，则将堆叠“自举”元素。

的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％-堆叠的元素

让我们简化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>

自举默认对齐所有列在单（COL）行具有相同的宽度。在这种情况下col，无论屏幕大小如何，三个将分别占据100％/ 3的宽度。您可以在gif中注意到这一点。

现在，如果我们只想每行只渲染一列，即给每一列提供100％的宽度，但仅适用于较小的屏幕呢？现在col-xx上课了！

我col-sm之所以使用，是因为我想将这些列分成576px以下的单独行。col-xxBootstrap为移动，平板电脑，笔记本电脑，大型显示器等不同的显示设备提供了这4 类。

因此，col-sm将跌破576px以下，col-md将跌破768px以下，col-lg将跌破992px 以下，并跌破1200px col-xl以下

请注意，col-xs引导程序4中没有任何类。

这差不多总结了。你可以回去上班了。

但是还有更多的东西。现在是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）相等的宽度。

但是，如果我们要对1st分配7个部分col，对2nd 分配3个部分，col对3rd分配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/

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

要了解更多详细信息，请通过以下链接进入：

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

好了，它用来告诉引导程序，根据屏幕大小，一行中将放置几列-

col-xs-2

在sm定义小屏幕md（中型），lg（大尺寸）的情况下，在超小（xs）屏幕中将仅连续显示两列，但如果您提及自举较小的第一条规则

xs-col-2 md-col-4

那么每行将显示2列，用于从xs到sm（包括）的屏幕尺寸，并在下一尺寸时更改，即从md到lg（包括），以更好地了解屏幕尺寸，请尝试在以下各种屏幕模式下运行它们chrome的开发人员模式（ctr + shift + i）并尝试各种像素或设备