Question

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

Answer 1

更新了2019年...

Bootstrap 3 网格有 4 层（或“断点”）......

超小（适用于智能手机.col-xs-*）
小（适用于平板电脑.col-sm-*）
中（适用于笔记本电脑.col-md-*）
大（适用于笔记本电脑/台式机.col-lg-*）。

这些网格大小使您可以控制不同宽度的网格行为。不同的层由CSS media queries控制。

所以在Bootstrap的12列网格......

col-sm-3是典型小设备宽度（> 768像素）的12列宽（25％）中的3列

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（默认）＆gt;被sm＆gt;覆盖被md＆gt;覆盖被lg

覆盖

合并类以使用不同的网格大小更改列宽。这会创建一个响应式布局。

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

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

调整浏览器的大小using this demo，您将看到网格缩放效果。

Bootstrap 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等。），但没有定义％宽度。因此，自动布局列会在整行中填充等宽。

本文解释了more about the Bootstrap grid

Answer 2

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

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

例如，如果您从列开始： A B C

您决定何时堆叠如下：

A

乙

C

如果选择col-lg，则当宽度为＆lt;时，列将堆叠。 1200像素。

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

如果你选择col-sm，那么当宽度为＆lt;时，列将叠加。 768px。

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

另一方面，如果您想到堆叠的列，那么您可以选择它们在什么时候变为水平：

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

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

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

Answer 3

来自Twitter Bootstrap documentation：

小格（≥768px）= .col-sm-*，
中等网格（≥992px）= .col-md-*，
大网格（≥1200px）= .col-lg-*。

Answer 4

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

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

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

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

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

如果选择col-lg-n，则列将正确显示，直到屏幕宽度低于xs阈值1200px。

Answer 5

设备大小和类前缀：

超小型设备电话（＆lt; 768px） - .col-xs-
小型设备平板电脑（≥768px） - .col-sm-
中型设备桌面（≥992px） - .col-md-
大型设备桌面（≥1200px） - .col-lg-

网格选项：

参考：Grid System

Answer 6

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

<强> 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％。

Answer 8

一个特例：在学习自举网格系统之前，请确保将浏览器缩放设置为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％

Browser 175 percent - stacked elements

Answer 9

以前它用于告诉bootstrap根据屏幕大小连续放置多少列 -

col-xs-2

在超小（xs）屏幕中连续显示2列，与sm定义小屏幕相同，md（中等大小），lg（大尺寸），但根据bootstrap较小的第一条规则，如果你提到

xs-col-2 md-col-4

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

Answer 10

让我们不复杂的Bootstrap！

请注意 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各自将占据100％/ 3的宽度。您可以在gif中注意到这一点。

现在，如果我们只希望每行仅渲染一列，即为每一列提供100％的宽度，而仅用于较小的屏幕，该怎么办？现在是col-xx类了！

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

因此，col-sm会跌破576px，col-md会跌破768px，col-lg会跌破992px，而col-xl会跌破1200px

请注意，引导程序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）。

但是，如果我们要给第一个col 7个部分，给第二个col 3个部分，剩下的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>