位置: IT常识 - 正文

vue AntD中栅格布局的四种大小xs,sm,md,lg(element栅格布局)

编辑:rootadmin
vue AntD中栅格布局的四种大小xs,sm,md,lg

推荐整理分享vue AntD中栅格布局的四种大小xs,sm,md,lg(element栅格布局),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:antdesign vue pro,antd栅格布局,vue栅格布局,antd栅格布局,ant design vue 布局,antd栅格布局,vue栅格布局,antd栅格布局,内容如对您有帮助,希望把文章链接给更多的朋友!

cssBootstrap栅格布局的四种大小xs,sm,md,lg

前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现。

使用bootStrap的网格系统时,常见到一下格式的类名

col-*-*

visible-*-*

hidden_*_*

中间可为xs,xsm,md,lg等表示大小的单词的缩写

右边为1-12之内、用于元素所占列数columns的数值

1.行<a-row gutter={{ md: 6, lg: 12, xl: 12 }}></a-row>gutter:md: 中等屏幕 桌面显示器 (≥992px)lg: 大屏幕 大桌面显示器 (≥1200px)xl:2.列<a-col md={6} sm={24}></a-col>md: 中等屏幕 桌面显示器 (≥992px)sm: 小屏幕 平板 (≥768px)

xs extra small超小

sm small

md meddle

vue AntD中栅格布局的四种大小xs,sm,md,lg(element栅格布局)

lg large

xl extra large超大

col-*对应所有设备

col-sm-平板--屏幕宽度等于或者大于576px

col-md-桌面显示屏--屏幕宽度大于或者等于768px

col-lg-大桌面显示器--屏幕宽度大于或者等于992px

col-xl-超大屏幕显示器--屏幕宽度大于等于1200px

响应式Layout布局xs,sm,md,lg,xl

<a-row :gutter="10"><a-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col><a-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col><a-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col><a-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col></a-row>

尺寸解释

每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例:

名称尺寸常用设备

xs<768px超小屏 如:手机

sm≥768px小屏幕 如:平板

md≥992px中等屏幕 如:桌面显示器

lg≥1200px大屏幕 如:大桌面显示器

xl≥1920px2k屏等

本文链接地址:https://www.jiuchutong.com/zhishi/287180.html 转载请保留说明!

上一篇:【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案(vue写css)

下一篇:德比郡高峰区的Winnats山口,英格兰 (© Christopher Drabble/Alamy)(德比郡在哪)

  • 产品营销到底应该怎么做?(产品的营销)

    产品营销到底应该怎么做?(产品的营销)

  • 打印机共享多台电脑教程(打印机 共享)(打印机共享台数怎么增加)

    打印机共享多台电脑教程(打印机 共享)(打印机共享台数怎么增加)

  • 苹果怎么删除小爱同学软件(苹果怎么删除小程序记录)

    苹果怎么删除小爱同学软件(苹果怎么删除小程序记录)

  • 离线表情删除有影响吗(离线表情是从哪来的)

    离线表情删除有影响吗(离线表情是从哪来的)

  • 小米手机怎么自定义水印(小米手机怎么自定义锁屏壁纸)

    小米手机怎么自定义水印(小米手机怎么自定义锁屏壁纸)

  • 华为p40pro的功能(华为p40pro有什么特别功能)

    华为p40pro的功能(华为p40pro有什么特别功能)

  • 微信背景怎么设置全部一样(微信背景怎么设置)

    微信背景怎么设置全部一样(微信背景怎么设置)

  • 华为nova5怎么截屏(华为nova5怎么截长图教程)

    华为nova5怎么截屏(华为nova5怎么截长图教程)

  • 新手机克隆没卡能行吗(新手机克隆没卡怎么办)

    新手机克隆没卡能行吗(新手机克隆没卡怎么办)

  • 抖音多少人在玩(抖音多少人在玩游戏)

    抖音多少人在玩(抖音多少人在玩游戏)

  • 微信高风险用户什么意思(微信高风险用户图片)

    微信高风险用户什么意思(微信高风险用户图片)

  • 手机突然没有4g信号怎么回事(手机突然没有4g网络 但是可以打电话)

    手机突然没有4g信号怎么回事(手机突然没有4g网络 但是可以打电话)

  • 微信新信息来不显示屏幕上是什么原因(微信新信息不显示怎么回事)

    微信新信息来不显示屏幕上是什么原因(微信新信息不显示怎么回事)

  • 华为手机p20双卡双待吗(华为p20手机双卡双待怎么用)

    华为手机p20双卡双待吗(华为p20手机双卡双待怎么用)

  • 淘宝转化率低怎么提升(淘宝转化率太低)

    淘宝转化率低怎么提升(淘宝转化率太低)

  • 触摸板鼠标不动了怎么办(触摸板好使鼠标不好使)

    触摸板鼠标不动了怎么办(触摸板好使鼠标不好使)

  • 为什么手机壁纸换不了总是黑色(为什么手机壁纸突然变成黑色)

    为什么手机壁纸换不了总是黑色(为什么手机壁纸突然变成黑色)

  • 小米8青春版支持18w吗(小米8青春版支持多少w快充)

    小米8青春版支持18w吗(小米8青春版支持多少w快充)

  • 打印机扫描功能啥意思(打印机扫描功能突然不能用了)

    打印机扫描功能啥意思(打印机扫描功能突然不能用了)

  • ipad内存条可以加吗(ipad内存条能不能换)

    ipad内存条可以加吗(ipad内存条能不能换)

  • 苹果11耳机孔在哪(苹果11耳机孔在哪儿)

    苹果11耳机孔在哪(苹果11耳机孔在哪儿)

  • 手机电信营业厅怎么退订业务(手机电信营业厅怎么办卡)

    手机电信营业厅怎么退订业务(手机电信营业厅怎么办卡)

  • 淘宝店铺销量怎么计算(淘宝店铺销量怎么做)

    淘宝店铺销量怎么计算(淘宝店铺销量怎么做)

  • 手机怎么制作docx(手机怎么制作docx图片文档)

    手机怎么制作docx(手机怎么制作docx图片文档)

  • wps中替换在哪(wps里的替换在哪)

    wps中替换在哪(wps里的替换在哪)

  • lutube苹果手机下载不了了吗(lutube iphone怎么下载)

    lutube苹果手机下载不了了吗(lutube iphone怎么下载)

  • 微信怎么取消点赞(微信怎么取消点赞功能)

    微信怎么取消点赞(微信怎么取消点赞功能)

  • 如何判断电源功率不足(如何判断电源是否发出功率)

    如何判断电源功率不足(如何判断电源是否发出功率)

  • phpcms上传提示错误500怎么解决(php 上传)

    phpcms上传提示错误500怎么解决(php 上传)

  • 亏损企业需要计提递延所得税资产吗
  • 代扣个人所得税怎么算
  • 固定资产清理应该在年报中怎么填写
  • 注销银行帐户需要什么
  • 合营企业和联营企业的持股比例
  • 哪些福利费不税前扣除
  • 税率如何衡量税负
  • 餐费补贴要交个人所得税吗
  • 残值要不要做分录
  • 小规模纳税人水利基金怎么报税
  • 股份制改造而发生的资产评估增值税法规定
  • 增值税简易计税账务处理
  • 行政事业单位工作经费使用范围
  • 计提出口关税会计分录
  • 应收应付明细表模板图片
  • 本月征期2021
  • 境内企业得到境外企业的红利是否需要缴纳所得税?
  • 行车记录仪怎么开发票
  • 简易计税方法使用范围
  • 固定资产报废处置账务处理
  • 租赁收入账务处理
  • 回购股票手续费会计分录
  • 医疗机构免征增值税如何申报
  • 年终一次性奖金个税计算
  • deepin启动延时
  • 复核内容有哪些?
  • php数组函数题目
  • php语言之mysql操作
  • 支付以前年度增值税怎么做账
  • 境外代扣代缴企业所得税的计税依据包含企业所得税嘛
  • 谷歌网页小恐龙
  • 在windows操作
  • 销售返利的形式有哪些
  • laravel框架实现增删改查
  • 老税号的发票还能认证吗
  • php图片代码
  • 购买房屋用于出租属于投资行为吗
  • 公对公的税票是怎么个流程
  • 印花税需要扣除负数发票吗
  • 工资与劳务报酬是否合并缴纳个税
  • php视频加水印
  • sql中drop的用法
  • 帝国cms灵动标签调用外表
  • 织梦cms怎么样
  • 海关缴款书上完税价格含增值税吗
  • 为什么实收资本是贷方
  • 在mysql中设置事务保存点
  • 什么是销项税额转出
  • 固定资产没收到发票能折旧吗
  • 已认证未记账
  • 银行金融手续费收费标准
  • 当月只有进项票没有销项票怎么办
  • 4s店出售试驾车的增值税是多少
  • 管理费用的核算方法
  • 公司给员工租房没有发票怎么入账
  • 核销预收账款是否需要计提增值税
  • 其他综合收益包括留存收益吗
  • 设置自动清理缓存电脑
  • linux如何挂载iso文件
  • open dhcp server
  • windows中alt+tab
  • win8删除文件不提示
  • linux使用ssh命令
  • Win10年度更新正式发布:功能全面升级
  • form表单中input设置为readonly和disabled的区别
  • opengl教程48讲
  • 'GL_COMBINE_ARB' : undeclared 'GL_RGB_SCALE_ARB' : undeclared 问题
  • javascriptz
  • node.js安装模式选择
  • 基于nodejs的项目
  • unity3d android 插件
  • jquery给table赋值
  • JavaScript入门教程
  • python 描述符类
  • android获取设备输出声音
  • android app测试
  • js如何实现复制
  • 税务局执法不规范整改
  • 河南工商年检网上申报
  • 郑东新区社保局电话号码是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设