在Twitter Bootstrap中,col-lg-*, col-md-*和col-sm-*有什么区别?
当前回答
来自Twitter Bootstrap文档:
小网格(≥768px) = .col-sm-*, 中网格(≥992px) = .col-md-*, 大网格(≥1200px) = .col-lg-*。
其他回答
引导文档确实解释了这一点,但我还是花了一段时间才弄懂。当我用以下两种方式之一向自己解释时,它更有意义:
如果您认为列从水平开始,那么您可以选择何时希望它们堆叠。
例如,如果你从列开始: A b c
你决定什么时候把它们堆成这样:
A
B
C
如果你选择col-lg,那么当宽度< 1200px时,列将堆叠。
如果你选择col-md,那么当宽度< 992px时,列将堆叠。
如果你选择colm -sm,那么当宽度< 768px时,列将会叠加。
如果你选择colx,那么列永远不会叠加。
另一方面,如果你认为这些列一开始是堆叠的,那么你可以选择它们在什么时候变成水平的:
如果你选择colm -sm,那么当宽度为>= 768px时,列将变成水平的。
如果你选择col-md,那么当宽度为>= 992px时,列将变成水平的。
如果你选择col-lg,那么当宽度为>= 1200px时,列将变成水平的。
一个特殊的例子:在学习引导网格系统之前,确保浏览器缩放设置为100%(100%)。例如:如果屏幕分辨率是(1600px x 900px),浏览器缩放是175%,那么“bootstrap-ped”元素将被堆叠。
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">class="col-lg-4"</div>
<div class="col-lg-4">class="col-lg-4"</div>
</div>
</div>
铬变焦100%
浏览器100% -元素水平放置
铬变焦175%
浏览器175% -堆叠元素
它用来告诉引导程序根据屏幕大小在一行中要放置多少列
col-xs-2
在超大(xs)屏幕上,一行只显示2列,就像sm定义的小屏幕一样,md(中等尺寸),lg(大尺寸), 但是根据自举法则,如果你提到
xs-col-2 md-col-4
然后,对于屏幕大小从xs到sm(包括)的每一行将显示2列,以及当它获得下一个大小时的变化,即对于md到lg(包括) 为了更好地理解屏幕大小,尝试在chrome的开发者模式(ctr+shift+i)中以各种屏幕模式运行它们,并尝试各种像素或设备
来自Twitter Bootstrap文档:
小网格(≥768px) = .col-sm-*, 中网格(≥992px) = .col-md-*, 大网格(≥1200px) = .col-lg-*。
.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up