Twitter Bootstrap 中的 col-lg-*
、col-md-*
和 col-sm-*
有什么区别?
最佳答案
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 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 包括新的 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 像素)
col-md-3
在典型的中等设备宽度(> 992 像素)
较小的层(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您会看到网格缩放效果。
关于css - Bootstrap 中的 col-lg-*、col-md-* 和 col-sm-* 有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19865158/