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
相关文章
|
人工智能 机器人 测试技术
【CMake报错】Cannot specify compile definitions for target “PRIVATE“ which is not built...
【CMake报错】Cannot specify compile definitions for target “PRIVATE“ which is not built...
|
运维 NoSQL 测试技术
Redis:内存陡增100%深度复盘
本文深度分析了Redis内存陡增100%的一些细节和解决方案。
562 1
Redis:内存陡增100%深度复盘
|
7月前
|
机器学习/深度学习 存储 人工智能
AI 视频检测:重构食品质检体系,破解大规模生产品质难题
AI视频检测技术助力食品行业质检升级,通过实时感知、精准识别与数据驱动,实现从加工到成品的全流程智能管控,解决传统质检效率低、标准不统一等问题。
906 0
|
JavaScript
成功解决:_vm.Login is not a function
这篇文章解释了在Vue.js应用中遇到"_vm.Login is not a function_"错误的原因,通常是因为尝试调用的_login_函数没有在当前组件的方法中定义。解决这个问题的方法是确保_login_函数在组件的方法对象中定义,并可以正确调用,同时检查函数名的拼写和调用语法是否正确。
|
网络协议 网络安全 网络架构
ping命令详解
【8月更文挑战第14天】 ping命令详解
1551 3
|
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)中查看。
1548 10
|
缓存 NoSQL 中间件
应对数据库不断膨胀的数据:缓存和队列中间件
【6月更文挑战第5天】该文探讨了优化数据库使用以提升应用系统性能的策略。文中建议利用Redis缓存和MQ消息队列作为辅助工具,以进一步优化性能和减少资源消耗。
551 2
应对数据库不断膨胀的数据:缓存和队列中间件
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
571 0
Vue项目打包后都产生了哪些JS请求?
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
1316 2
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的题库管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的题库管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
248 0

热门文章

最新文章