作者：那些触动你的回忆 | 来源：互联网 | 2023-05-17 03:34
boostrap中lg,md,sm,xs分别表示多少px？.col-xs-超小屏幕手机(<768px).col-sm-小屏幕平板(≥768px).col-md-中等屏幕桌面显
boostrap中lg,md,sm,xs分别表示多少px？
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
bootstrap中四个class如何使用？
一个栅格代表1，总共十二个。以上四个类分别表示当屏幕的宽度为多少时，触发相应的类
比如：
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">div>
表示在.col-lg- 大屏幕 大桌面显示器 (≥1200px)时，占一行的3/12，在.col-md- 中等屏幕 桌面显示器 (≥992px)时，占4/12，在.col-sm- 小屏幕 平板 (≥768px)时，占6/12，在.col-xs- 超小屏幕 手机 (<768px)时，占12/12，也就是一行。
与之对应的，
<div class="col-lg-3 col-lg-offset-3 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-6 col-xs-12 col-xs-offset-12">div>
移位的格数也要对应计算。
bootstrap框架就是按照类名显示相应的样式，内部已经做了响应式处理，来看一小段源码：
@media (min-width: 768px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
这里在css部分就做了处理。
京公网安备 11010802041100号