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
相关文章
|
关系型数据库 索引
DB2查询主键、索引、表约束
DB2查询主键、索引、表约束
1148 0
|
人工智能 机器人 测试技术
【CMake报错】Cannot specify compile definitions for target “PRIVATE“ which is not built...
【CMake报错】Cannot specify compile definitions for target “PRIVATE“ which is not built...
|
小程序
小程序wx.switchTab的跳转传参问题
小程序wx.switchTab的跳转传参问题
453 0
|
JavaScript
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
|
JavaScript
成功解决:_vm.Login is not a function
这篇文章解释了在Vue.js应用中遇到"_vm.Login is not a function_"错误的原因,通常是因为尝试调用的_login_函数没有在当前组件的方法中定义。解决这个问题的方法是确保_login_函数在组件的方法对象中定义,并可以正确调用,同时检查函数名的拼写和调用语法是否正确。
|
JSON Rust 前端开发
【sheetjs】纯前端如何实现Excel导出下载和上传解析?
本文介绍了如何使用`sheetjs`的`xlsx`库在前端实现Excel的导出和上传。项目依赖包括Vite、React、SheetJS和Arco-Design。对于导出,从后端获取JSON数据,通过`json_to_sheet`、`book_new`和`writeFile`函数生成并下载Excel文件。对于上传,使用`read`函数将上传的Excel文件解析为JSON并发送至后端。完整代码示例可在GitHub仓库[fullee/sheetjs-demo](https://github.com/fullee/sheetjs-demo)中查看。
1119 10
|
网络协议 网络安全 网络架构
ping命令详解
【8月更文挑战第14天】 ping命令详解
823 3
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
361 0
Vue项目打包后都产生了哪些JS请求?
|
机器学习/深度学习 数据采集 缓存
Elasticsearch与机器学习集成的最佳实践
【8月更文第28天】Elasticsearch 提供了强大的搜索和分析能力,而机器学习则能够通过识别模式和预测趋势来增强这些能力。将两者结合可以实现更智能的搜索体验、异常检测等功能。
347 0
|
Kubernetes 负载均衡 网络协议
青云LB(负载均衡)与k8s实战(一)
青云LB(负载均衡)与k8s实战(一)
508 0
青云LB(负载均衡)与k8s实战(一)