一尘不染

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

css

是什么之间的差异col-lg-*col-md-*col-sm-*在Twitter的引导?


阅读 640

收藏
2020-05-16

共1个答案

一尘不染

2019年更新…

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

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

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

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

col-sm-3在典型的 小型 设备宽度(> 768像素)上为12列宽中的3列(25%)

col-md-3在典型的 中等 设备宽度(> 992像素)上为12列宽中的3列(25%)


较小的层(xssmmd)还定义了用于更大的屏幕宽度的尺寸。因此,对于所有层上 相同 大小的列,只需设置最小视口的宽度即可。

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

smmdlg电网将在屏幕上/视所有“堆栈”纵向比768少。这是xs网格适合的地方。使用col-xs-*类的列将 不会
垂直堆叠,并且会继续在最小的屏幕上按比例缩小。

使用此演示调整浏览器的大小,您将看到网格缩放效果。


引导程序4

引导4 有一个新的-xl-大小,请参阅该演示。另外,-xs- 缀已经被移除,所以最小的列是简单的col-1col-2.. col-12等。

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

此外,Bootstrap 4包括新的自动布局列。这些也有响应断点(colcol-smcol-md,等),但没有定义%的宽度。因此,自动布局列在行中的宽度相等

2020-05-16