在Bootstrap中，col-lg-*、col-md-*和col-sm-*之间有什么区别？

Question

在Bootstrap中，col-lg-*、col-md-*和col-sm-*之间有什么区别？.之间有什么区别？col-lg-* , col-md-*和col-sm-*在推特上？

Answer 1

这个自举3网格进来4层(或“断点”).

• 超小型(用于智能手机)

  .col-xs-*)

• 小药片

  .col-sm-*)

• 中型(适用于膝上型计算机)

  .col-md-*)

• 大型(用于膝上型计算机/台式机)

  .col-lg-*).

这些网格大小使您能够控制不同宽度的网格行为。不同的层由css控制。媒体查询.

所以在Bootstrap的12列网格中.

col-sm-312列中有3列宽(25%)小的设备宽度(>768像素)

col-md-312列中有3列宽(25%)介质设备宽度(>992像素)

---

较小的层(xs, sm或md)还定义了大屏幕宽度的大小..所以，对于同“大小”列在所有层上，只需为最小的视图设置宽度.

<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像素。这是xs网格适合。使用col-xs-*课程不垂直叠加，并在最小屏幕上继续缩小。

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

---

自举4

在……里面自举4有一个新的-xl-尺寸，见这个演示..还有-xs-Infix已被移除，所以最小的列很简单col-1, col-2.. col-12等等。

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

引导4网格演示

此外，Bootstrap 4还包括新的自动布局列..它们还具有响应性断点(col, col-sm, col-md，等等)，但没有定义%宽度。因此，自动布局列填充等宽穿过这排。

---

本文解释更多关于引导网格的信息

Answer 2

自举博士请解释一下，但我还是花了一段时间才弄到手。当我用两种方式向自己解释这件事时，就更有意义了：

如果您认为列是水平开始的，那么您可以选择何时堆栈它们。.

例如，如果以列开头：A、B、C

您可以决定什么时候应该这样堆叠：

A

B

C

如果选择col-lg，则当宽度小于1200 px时，列将堆叠。

如果选择col-md，则当宽度<992px时，列将堆栈。

如果您选择col-sm，那么当宽度<768 px时，这些列将堆叠。

如果选择col-xs，那么列将永远不会堆栈。

另一方面，如果您认为列开始堆叠，那么您可以选择在什么点它们变成水平的。:

如果选择col-sm，则当宽度>=768 px时，列将变为水平列。

如果选择col-md，则当宽度>=992px时，列将变为水平列。

如果选择col-lg，则当宽度>=1200 px时，列将变为水平列。