位置: 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)(德比郡在哪)

  • mx350相当于gtx多少

    mx350相当于gtx多少

  • 英特尔控制面板不见了(英特尔控制面板怎么设置成最佳游戏)

    英特尔控制面板不见了(英特尔控制面板怎么设置成最佳游戏)

  • qq已实名未绑卡限额(qq已实名未绑卡收款限额需要绑定银行卡,多久可以恢复)

    qq已实名未绑卡限额(qq已实名未绑卡收款限额需要绑定银行卡,多久可以恢复)

  • 11屏幕尺寸(华为matepad11屏幕尺寸)

    11屏幕尺寸(华为matepad11屏幕尺寸)

  • 微信步数为什么不能看到全部人的(微信步数为什么走了还是0)

    微信步数为什么不能看到全部人的(微信步数为什么走了还是0)

  • 钉钉视频过大无法发送(钉钉视频过大无法预览)

    钉钉视频过大无法发送(钉钉视频过大无法预览)

  • 电脑打印按哪两个键(电脑打印用哪两个键)

    电脑打印按哪两个键(电脑打印用哪两个键)

  • 苹果手机无指纹什么意思(苹果手机无指纹是什么意思)

    苹果手机无指纹什么意思(苹果手机无指纹是什么意思)

  • 指纹浅不好识别怎么办(指纹识别不清晰)

    指纹浅不好识别怎么办(指纹识别不清晰)

  • 电脑开机出现americanmegatrends怎么办(电脑开机出现american megatrends)

    电脑开机出现americanmegatrends怎么办(电脑开机出现american megatrends)

  • 红米k30pro尺寸(红米k30pro尺寸图)

    红米k30pro尺寸(红米k30pro尺寸图)

  • 微信视频模糊怎么调整(微信视频模糊怎么设置清晰)

    微信视频模糊怎么调整(微信视频模糊怎么设置清晰)

  • wifi的ssid是什么(wifi的ssid怎么查看)

    wifi的ssid是什么(wifi的ssid怎么查看)

  • vol键是什么意思(vol是什么按键)

    vol键是什么意思(vol是什么按键)

  • 怎么样恢复微信好友(怎么样恢复微信以前的聊天记录)

    怎么样恢复微信好友(怎么样恢复微信以前的聊天记录)

  • 苹果和华为如何隔空传照片(苹果和华为如何换机)

    苹果和华为如何隔空传照片(苹果和华为如何换机)

  • 手机qq怎么封存说说(手机qq怎么封号)

    手机qq怎么封存说说(手机qq怎么封号)

  • 手机上删除的短信怎么恢复(手机上删除的短信)

    手机上删除的短信怎么恢复(手机上删除的短信)

  • 乐视手机怎么录屏幕(乐视手机怎么录视频)

    乐视手机怎么录屏幕(乐视手机怎么录视频)

  • 回执编号在qq安全中心怎么确认的(回执编号 qq)

    回执编号在qq安全中心怎么确认的(回执编号 qq)

  • 淘宝关注的主播在哪里(淘宝关注的主播怎么找到)

    淘宝关注的主播在哪里(淘宝关注的主播怎么找到)

  • qq续草什么意思(女生说续草是什么意思)

    qq续草什么意思(女生说续草是什么意思)

  • 最早的电视遥控器是什么(最早遥控器是谁发明的)

    最早的电视遥控器是什么(最早遥控器是谁发明的)

  • 大二一个学期学这么点内容,没有概念,只有实操(大二一学期学分多少合适)

    大二一个学期学这么点内容,没有概念,只有实操(大二一学期学分多少合适)

  • 怎样理解一般纳税人
  • 税收分类编码是唯一的吗
  • 提取法定盈余公积是从净利润中提取吗
  • 超市小规模纳税人会计难吗
  • 小微小型微利企业减按20%的所得税税率征收企业所得税
  • 坏账准备和信用账户区别
  • 成品油跨月发票红字冲销步骤
  • 外贸企业出口货物
  • 结转本期会计分录
  • 留抵进项税额
  • 分给当期投资者利润如何做会计分录?
  • 公司破产后资产怎么处理
  • 话费发票入账
  • 关于小规模纳税人的说法错误的有
  • 单位为员工报销的博士学费算什么费用
  • 员工看病报销要计税吗
  • 19年新会计制度
  • 公司注销要给钱吗
  • 海关专用缴款书怎么认证?
  • 付现所得税体现在哪方面
  • 制造费用在利润表体现吗
  • 企业研发过程中特殊收入的会计处理
  • 没有购销合同怎么申报印花税
  • 企业所得税发票虚假成本调减当年的吗
  • 零元股权转让会亏本吗
  • 向投资者分配现金股利会计分录?
  • mac怎么查询是不是正品
  • 商品入库没有收到发票
  • win10蓝牙驱动程序下载
  • 个人独资企业每月开票金额
  • 开户银行对公司有影响吗
  • php ajax json
  • jdk1.8环境变量设置
  • ctl.start
  • 威尼斯海滩滑板场
  • 韦罗尼卡
  • php curl_exec
  • 用jsp实现用户登录验证
  • pwd命令的用法
  • windows刻录cd
  • 垃圾费放在哪个会计科目
  • 房地产预缴增值税计税依据
  • 织梦cms为什么不维护了
  • mysql备份数据恢复
  • 投资理财产品的骗术
  • 坏账准备抵消期初未分配利润
  • 职工福利费允许抵扣吗
  • 股权变更如何交税
  • 现汇跟承兑有什么区别
  • mysql load local
  • 公司自主研发新能源汽车
  • 平均资产总额与资产总额的关系
  • 运输公司内账会计每天需要做什么
  • 固定资产汽车折旧年限是多少年
  • 国家知识产权专利网
  • 列举2-4种特殊销售方式,其销售额如何确认?
  • 财政拨付注册资金怎么填
  • 个人所得税专项扣除能抵多少
  • 资产负债表基本公式
  • 物流货到付款可以吗
  • mysql在查询结果中查询
  • sql sever实验指导
  • sqlserver substring函数使用方法小结
  • ubuntu系统中怎么安装mathematica13.1.0
  • win10阻止可能不需要的应用吗
  • Ubuntu 15.04系统怎么清理的系统垃圾文件?
  • win7系统卡慢怎么修复
  • linux分区方案lvm
  • win10升级最新版
  • win8怎么看电脑wifi密码
  • linuxzen
  • unity3d怎么用
  • css中选择符
  • shell 循环 for
  • python 终端
  • 如何查询哈尔滨医院药品信息
  • 退休军人免门票吗
  • 试运行期间的收入应如何处理
  • 工程合同可以违背国家规范吗
  • 印花税票在哪里可以查到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设