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

Question

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

Answer 1

2020 年更新...

Bootstrap 5

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

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

Bootstrap 5 Grid Demo

---

Bootstrap 4

在 Bootstrap 4 中有一个新的 -xl-尺寸，参见 this demo .还有 -xs-中缀已被删除，所以最小的列就是col-1 , col-2 .. col-12等..

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

Bootstrap 4 Grid Demo

此外，Bootstrap 4 包括新的 auto-layout columns .这些也有响应断点( col 、 col-sm 、 col-md 等)，但没有定义 % 宽度。因此，自动布局列在行中填充等宽。

---

Bootstrap 3

Bootstrap 3 网格有 4 层(或“断点”)...

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

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

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

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

上是 12 列中的 3 列宽 (25%)

col-md-3在典型的中等设备宽度(> 992 像素)

上是 12 列中的 3 列宽 (25%)

---

较小的层(xs、sm 或 md)也定义了较大屏幕宽度的尺寸。因此，对于所有层上的相同 大小列，只需设置最小视口(viewport)的宽度...

<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 像素的屏幕/视口(viewport)上。这是 xs 的位置网格适合。使用 col-xs-* 的列类将不会垂直堆叠，并在最小的屏幕上继续缩小。

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

---

本文解释more about how the Bootstrap grid