col-xs , col-sm , col-md , col-lg是什么意思?什么时候用?

简介: .col-xs- 超小屏幕 手机 (

.col-xs- 超小屏幕 手机 (<768px)

.col-sm- 小屏幕 平板 (≥768px)

.col-md- 中等屏幕 桌面显示器 (≥992px)

.col-lg- 大屏幕 大桌面显示器 (≥1200px)

<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
                        
</div>

当屏幕尺寸

小于 768px 的时候,用 col-xs-12 类对应的样式;

在 768px 到 992px 之间的时候,用 col-sm-9 类对应的样式;

在 992px 到 1200px 之间的时候,用 col-md-6 类对应的样式;

大于 1200px 的时候,用 col-lg-3 类对应的样式;

学习交流群:364976091
相关文章
|
6月前
|
JavaScript 前端开发
ElementUI响应式Layout布局xs,sm,md,lg,xl
ElementUI响应式Layout布局xs,sm,md,lg,xl
|
1月前
|
存储 算法 安全
SM2解密
【10月更文挑战第5天】SM2解密
88 11
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
5930 0
Element el-row el-col 布局组件详解
|
6月前
|
索引 Python
row[i] = col[j] = TrueIndexError: list assignment index out of range
row[i] = col[j] = TrueIndexError: list assignment index out of range
|
编解码 前端开发 Perl