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
相关文章
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
5039 0
Element el-row el-col 布局组件详解
|
5天前
|
索引 Python
row[i] = col[j] = TrueIndexError: list assignment index out of range
row[i] = col[j] = TrueIndexError: list assignment index out of range
|
11月前
|
存储 安全 关系型数据库
Column length too big for column ‘remark‘ (max=65535)解决办法
Column length too big for column ‘remark‘ (max=65535)解决办法
152 0
|
Web App开发 关系型数据库 Java
Data truncation: Data too long for column 'xxx' at row 1
版权声明:本文为 testcs_dn(微wx笑) 原创文章,非商用自由转载-保持署名-注明出处,谢谢。 https://blog.csdn.net/testcs_dn/article/details/78870542 ...
2065 0
|
Web App开发 Java 关系型数据库
Data truncation: Data too long for column &#39;xxx&#39; at row 1
Data truncation: Data too long for column 'xxx' at row 1 完整的错误内容可能是下面这样的: p.p1 {margin: 0.0px 0.0px 0.
2084 0
|
SQL Oracle 关系型数据库