在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,&nbsp;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,&nbsp;md和lg网格将所有垂直堆叠在屏幕/视口小于768像素。这是xs网格适合。使用col-xs-*课程不垂直叠加，并在最小屏幕上继续缩小。调整浏览器的大小使用此演示你会看到网格缩放的效果。自举4在……里面自举4有一个新的-xl-尺寸，见这个演示..还有-xs-Infix已被移除，所以最小的列很简单col-1,&nbsp;col-2..&nbsp;col-12等等。col-*-0(Xs)col-sm-*-576 pxcol-md-*-768 pxcol-lg-*-992 pxcol-xl-*-1200页引导4网格演示此外，Bootstrap 4还包括新的自动布局列..它们还具有响应性断点(col,&nbsp;col-sm,&nbsp;col-md，等等)，但没有定义%宽度。因此，自动布局列填充等宽穿过这排。本文解释更多关于引导网格的信息

Answer 2

自举博士请解释一下，但我还是花了一段时间才弄到手。当我用两种方式向自己解释这件事时，就更有意义了：如果您认为列是水平开始的，那么您可以选择何时堆栈它们。.例如，如果以列开头：A、B、C您可以决定什么时候应该这样堆叠：ABC如果选择col-lg，则当宽度小于1200 px时，列将堆叠。如果选择col-md，则当宽度<992px时，列将堆栈。如果您选择col-sm，那么当宽度<768 px时，这些列将堆叠。如果选择col-xs，那么列将永远不会堆栈。另一方面，如果您认为列开始堆叠，那么您可以选择在什么点它们变成水平的。:如果选择col-sm，则当宽度>=768 px时，列将变为水平列。如果选择col-md，则当宽度>=992px时，列将变为水平列。如果选择col-lg，则当宽度>=1200 px时，列将变为水平列。