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

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

2019年更新…

所述 自举3 格进来 4 层（或“断点”）…

这些网格大小使您可以控制不同宽度上的网格行为。不同的层由CSS 媒体查询控制。

因此，在Bootstrap的12列网格中…

col-sm-3

在典型的小型设备宽度（> 768像素）上为12列宽中的3列（25％）

col-md-3

在典型的中等设备宽度（> 992像素）上为12列宽中的3列（25％）

较小的层（

xs

，
sm
或
md
）还定义了用于更大的屏幕宽度的尺寸。因此，对于所有层上相同大小的列，只需设置最小视口的宽度即可。

<div >..</div>

是相同的，

<div >..</div>

隐含更大的层。因为

col-sm-3

意味着

3 units on sm-and-up

，除非被使用不同大小的较大层明确覆盖。

xs

（默认值）>被覆盖

sm

>被覆盖

md

>被覆盖

lg

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

<div >..</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包括新的自动布局列。这些也有响应断点（

col

，

col-sm

，

col-md

，等），但没有定义％的宽度。因此，自动布局列在行中的宽度相等 。

欢迎分享，转载请注明来源：内存溢出

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