element栅格自定义等分

news/2024/7/10 0:02:09 标签: elementui, vue

由于element栅格组件是 24 分栏,所以当我们需要5、7、9等分时,就不好实现

<template>
  <el-row>
    <el-col :span="24">1</el-col>
  </el-row>
  <el-row>
    <el-col :span="12">2</el-col>
    <el-col :span="12">2</el-col>
  </el-row>
</template>

解决方式:自定义等分
例子:满足 md 时4等分,满足 lg 时5等分

<template>
  <el-row>
    <el-col :md="6" :lg="{ span: '5-5' }"></el-col>
  </el-row>
</template>

<style>
  // 当我们需要适配时,自定义等分一定要加上媒体查询
  @media only screen and (width >= 1200px) {
    .el-col-lg-5-5 {
      max-width: 20%;
    }
  }
</style>

// scoped中需要使用深度选择器
<style lang="scss" scoped>
 @media only screen and (width >= 1200px) {
    :deep(.el-col-lg-5-5) {
      max-width: 20%;
    }
 }
<style>

在这里插入图片描述

在这里插入图片描述


http://www.niftyadmin.cn/n/698491.html

相关文章

ES6中的Class关键字和super()用法(ES6中的class类和super()方法)

简介&#xff1a;在ES6中&#xff0c;我们可以使用class关键字来定义类&#xff0c;并通过extends关键字实现类的继承&#xff0c;然后在子类中&#xff0c;我们可以使用super()关键字来调用父类的构造函数&#xff1b;今天来分享下class关键字的使用详细。 1、首先&#xff0c…

mysql 优化

目录 大表优化 查询优化 慢查询日志 查询计划分析 大表优化 当MySQL单表记录数过大时&#xff0c;数据库的CRUD性能会明显下降&#xff0c;一些常见的优化措施如下&#xff1a; 限定数据的范围 务必禁止不带任何限制数据范围条件的查询语句。比如&#xff1a;我们当用户在…

Linux shell(数组-循环-echo)

#!/bin/bash # 定义表名数组 tables("表名1" "表名2" "表名3" "表名4" "表名5")months("01" "02" "03" "04" "05" "06" "07" "08" "…

汽车统一bootloaderv2.0版本 翻译

统一bootloader系统 统一bootloader范围 下图展示了PC通过适配器与ECU连接。高亮公布部分是ECU和PC共同的。所有平台都是一样的。 统一bootloader关键特征 UDS(ISO14229)TP(ISO1765-2/CAN,ISO17987-2/LIN)Flash驱动包括共同的要求从主机下载Flash驱动bootloader检测APP完整…

LLM - 搭建 ProteinGPT 结合蛋白质结构 PDB 知识的行业 ChatGPT 系统

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131403263 论文&#xff1a;ProteinChat: Towards Enabling ChatGPT-Like Capabilities on Protein 3D Structures 工程&#xff1a;ht…

在线Markdown编辑器

一直在寻找一款好用的在线Markdown编辑器&#xff0c;但是好像没有比较知名的简洁的&#xff0c;寻思自己赶紧搞一个&#xff0c;于是找了项目&#xff0c;手动搞了一个上线了&#xff0c;效果不错&#xff0c;特性拉满。欢迎试用 支持“标准” Markdown / CommonMark 和 Gith…

【MSP432电机驱动设计—下篇】霍尔编码器测车轮运行距离与M/T综合公式法测速概念

开发板型号为MSP432P401r 今日得以继续我的MSP432电赛速通之路&#xff0c;本篇使用MSP432编程学习霍尔编码器M/T公式法测速概念&#xff0c;最终实现用外部中断方式测得小车行走路程&#xff0c;文章学习讲解原理、附上实例实践、附上关键代码、附上…

安装pdf打印机无法找到安装打印机的核心驱动

安装pdf打印机无法找到安装打印机的核心驱动&#xff0c;出现这种情况下。可以利用以下方法解决 第一步&#xff1a; *C:\Windows\System32\DriverStore* 这个文件夹。在 FileRepository 文件夹上面&#xff0c;点击右键“管理员取得所有权”命令&#xff0c;这个时候会跳出一…