[前端] 前端bootstrap col-xs-6 col-md-3的布局意思
2023-02-18 15:36:44 时间
bootstrap布局是栅格系统
页面分为12格子
col-6 表示占6格
col-3表示占3格
v5版本的新表示
xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px | |
---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
实测-md就是大于768px
col后面啥也不写,就是小于768px
例如下面的布局
大于768px 占四分之一
小于768px 占一半
相关文章
- 【黄啊码】如何用小程序实现世界杯参赛队伍投票
- 《Android App开发进阶与项目实战》资源下载和内容勘误
- 微信小程序使用阿里巴巴的矢量图标iconfont
- 微信小程序 点击显示隐藏 极简Tab标签 点击添加class样式
- 微信小程序 wx:if 与 hidden区别
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
- 微信小程序 自定义 tabBar案例 官方案例迁入无效解决方法 非 tab 页显示 tabBar的问题解决 自定义tabBar与原生tabBar以及自写伪tabbar的区别
- IOS APPStore 上传更新应用版本 软件
- Android - NETD解读
- 【Android自定义控件】不用ScrollView实现上下两屏滑动
- Android实现TextView跑马灯效果
- Android进程间通信(一)- Bundle
- Android进程间通信(二)- Messenger
- 微信小程序实现上拉和下拉加载更多
- 微信小程序 scroll-view 完成上拉加载更多
- 微信小程序实现tabs选项卡
- java和vue学生定位打卡小程序人脸识别打卡系统源码网站学生考勤系统
- Java疫苗预约小程序线上疫苗预约系统
- 移动研发提效?小程序容器技术来帮忙!
- 微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题