需求


效果卡片样式下图

默认一行4
默认一行4个
屏幕缩小到某个阈值一行展示3个,以此类推
在这里插入图片描述


实现方法

html

<div>   
 <el-row>
	 <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="cellItem" v-for="item in systemList" :key="item.sysId">
	    .....卡片内容布局代码
	 </el-col&gt;
 </el-row&gt;
</div&gt;

以上布局浏览器调试发现,其实设置的就是这些:
在这里插入图片描述
这些其实跟elementUI官方文档刚好符合:
在这里插入图片描述
如果文档默认设置已经可以符合你的需求,就不用往下看了,根据elementUI文档配置调试即可

———-分割线——————————————————————————————————————

而我的需求,elementUI默认换行方式,不能满足,所以我需要自定义

自定义换行屏幕分辨率大小:

css(根据屏幕分辨率大小进行判断设置)

<style scoped>
 @media screen and (min-width: 1600px) {
    .el-col-lg-6{
      width: 25%;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1600px){
    .el-col-lg-6{
      width: 33.3%;
    }
  }
  @media screen and (min-width: 800px) and (max-width: 1200px) {
    .el-col-lg-6{
      width: 50%;
    }
  }
</style>

以上,希望能帮助到你~
end
~

原文地址:https://blog.csdn.net/weixin_52443895/article/details/134733158

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_25040.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注