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

从# EYZ0:

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

< >强更新2020…< / >强

引导5

在引导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

在引导4中有一个新的-xl-大小，参见这个演示。还有-xs-中缀已被移除，所以最小的列就是col-1， col-2..# EYZ4等等. .

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

Bootstrap 4 Grid Demo

此外，引导4包括新的自动布局列。它们也有响应断点(col， col-sm， col-md，等等)，但是没有定义%宽度。因此，自动布局列在整行中填充平等的宽度。

引导3

引导3网格有4层(或“断点”)…

• 小号(适用于.col-xs-*智能手机)
• 小片(适用于.col-sm-*片剂)
• 中等(适用于.col-md-*笔记本电脑)
• 大(适用于笔记本电脑/台式机.col-lg-*)。

这些网格大小使您能够控制不同宽度上的网格行为。不同的层由css# EYZ0控制。

在Bootstrap的12列网格中…

col-sm-3是典型的小设备宽度(>768像素)

col-md-3是典型的媒介设备宽度(>992像素)

# EYZ3。因此，对于所有层的相同大小列，只需设置最小视口的宽度…

<div class="col-lg-3 col-md-3 col-sm-3">..</div>和，

# EYZ0

因为col-sm-3意味着3 units on sm-and-up，除非特别被使用不同大小的更大的层覆盖。

# EYZ0(默认)的在sm >md >被lg覆盖

# EYZ0。这将创建一个响应式布局。

# EYZ0

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

调整浏览器的大小使用这个演示，你会看到网格缩放效果。

本文将解释更多关于如何引导网格

我想通过声明…来澄清这一点。 低颗粒类型(xs, sm)试图在较小的屏幕上保留布局外观，而较大类型(md,lg)将仅在较大的屏幕上正确显示，但将在较小的设备上包装列。 前面示例中引用的值指的是bootstrap降低外观以适应可用屏幕属性的阈值 这在实践中意味着，如果您使列为col-xs-n，那么即使在非常小的屏幕上，它们也将保持正确的外观，直到窗口下降到限制页面不能正确显示的大小。 这意味着宽度为768px或更小的设备应该显示您设计的表，而不是降级(单列或换行列形式)。 显然，这仍然取决于列的内容，这就是重点。如果页面试图在一个小屏幕上并排显示大数据的多个列，那么如果您没有考虑到这一点，这些列自然会以一种可怕的方式环绕。因此，根据列中的数据，您可以决定牺牲布局的点，以充分显示内容 < p >。如果你的页面包含三个colm -sm-n列，当页面宽度下降到992px以下时，bootstrap会将列包装成行。 这意味着数据仍然可见，但需要垂直滚动才能查看。如果你不希望你的布局降级，选择xs(只要你的数据可以充分显示在低分辨率设备上的三列)

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

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

引导文档确实解释了这一点，但我仍然花了一段时间来理解它。当我用以下两种方式之一向自己解释时，它更有意义:

# EYZ0。

你决定什么时候把它们堆成这样:

一个

B

C

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

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

如果你选择colm -sm，那么当宽度为<时，列将堆叠;768 px。

如果你选择colx，那么列永远不会叠加。

# EYZ0:

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

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

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

设备大小和类前缀:

• 超小型设备手机(<768px) - .col-xs-
• 小型设备平板(≥768px) - .col-sm-
• 中型设备桌面(≥992px) - .col-md-
• 大型设备桌面(≥1200px) - .col-lg-

网格选项:

参考:# EYZ0

.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”元素将被堆叠。

超文本标记语言

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

它用来告诉引导程序根据屏幕大小在一行中要放置多少列

col-xs-2

将在额外的小屏幕(xs)中一行只显示2列，与sm定义小屏幕，md(中等尺寸)，lg(大尺寸)， 但根据bootstrap更小的第一规则，如果你提到

xs-col-2 md-col-4

那么2列将显示在每行屏幕大小从xs到sm(包括)和变化时，它得到下一个大小，即md到lg(包括) 为了更好地理解屏幕大小，尝试在chrome的开发者模式(ctr+shift+i)中以各种屏幕模式运行它们，并尝试各种像素或设备

博士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%宽度。

让我们简化Bootstrap!

注意，col-sm占据了576px下面的100%宽度(换句话说，在新行中)，而上校没有。你可以注意到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)对齐到一个宽度相同的行中。在这种情况下，三个col将分别占用100%/3宽度，无论屏幕大小。你可以在gif中注意到。

现在，如果我们想渲染每行只有一列，即给每列100%的宽度，但只适用于小屏幕?现在是col-xx类!

我使用col-sm，因为我想把列分割成低于576px的独立行。这些4 col-xx类由Bootstrap提供，适用于不同的显示设备，如手机，平板电脑，笔记本电脑，大型显示器等。

因此，col-sm将打破低于576px， col-md将打破低于768px， col-lg将打破低于992px，# EYZ3将打破低于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>

它不会有什么不同，因为默认情况下bootstrap给出了相同的宽度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>

你也可以自定义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/