element栅格自定义等分

news2024/11/16 23:56:17

由于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.coloradmin.cn/o/700622.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Java可执行命令】(三)API文档生成工具javadoc: 深入解析Java API文档生成工具javadoc ~

Java可执行命令详解之javadoc 1️⃣ 概念2️⃣ 优势和缺点3️⃣ 使用3.1 语法格式3.1.1 可选参数&#xff1a;-d < directory>3.1.2 可选参数&#xff1a;-sourcepath < pathlist>3.1.3 可选参数&#xff1a;-classpath < pathlist>3.1.4 可选参数&#xff1…

JTAG 、 SWD 和 J-Link、ST-Link

JTAG和SWD的区别与联系JTAG接口SWD接口JTAG和SWD的区别与联系J-Link和ST-LinkJ-LINK仿真器STLINK仿真器JLINK和STLINK的比较与选择 JTAG和SWD的区别与联系 JTAG和SWD是两种常用的用于调试和编程ARM微控制器的接口&#xff0c;它们都可以通过调试器&#xff08;如ST-LINK或J-Li…

插入排序——希尔排序

希尔排序其实就是一种插入排序&#xff0c;实际上就是通过直接插入排序一步步改进优化而实现的。所以在了解希尔排序之前要明白插入排序的实现原理。 插入排序 其实我觉得插入排序也可以叫做摸牌排序&#xff0c;就是从第二张牌开始处理&#xff0c;将摸到的牌按照合适的顺序插…

音频分析仪-测试

底噪&#xff1a; 有效值&#xff1a; ** 增益&#xff1a; ** ** 延时-脉冲响应 **

基于Java+Swing+Mysql影院售票系统

基于JavaSwingMysql影院售票系统 一、系统介绍二、功能展示1.主页2.新增影片信息3.删除影片信息 三、数据库四、其他系统实现五、获取源码 一、系统介绍 该系统实现了查看影片列表、新增影片信息、删除影片信息 运行环境&#xff1a;eclipse、idea、jdk1.8 二、功能展示 1.…

大环境之下软件测试行业趋势能否上升?

如果说&#xff0c;2022年对于全世界来说&#xff0c;都是一场极大的挑战的话&#xff1b;那么&#xff0c;2023年绝对是机遇多多的一年。众所周知&#xff0c;随着疫情在全球范围内逐步得到控制&#xff0c;无论是国际还是国内的环境&#xff0c;都会呈现逐步回升的趋势&#…

Java教程-Java异常传播

异常首先从调用堆栈的顶部抛出&#xff0c;如果没有被捕获&#xff0c;它会向下传递到前一个方法。如果在那里没有被捕获&#xff0c;异常会再次向下传递到前一个方法&#xff0c;依此类推&#xff0c;直到它们被捕获或者达到调用堆栈的最底部。这被称为异常传播。 异常传播示例…

Beego之Bee安装以及创建,运行项目

一.简介 Bee是什么&#xff1f; bee工具是一个为了协助快速开发 Beego 项目而创建的项目&#xff0c;通过 bee 可以很容易的进行 Beego 项目的 创建、热编译、开发、测试和部署 Beego中文文档 Beego中文文档: Beego简介 安装前提 在安装bee之前&#xff0c;首先得提前安装好Go的…

5.6.1 端口及套接字

5.6.1 端口及套接字 传输层的作用是在通信子网提供服务的基础之上为它的上层也就是应用进程提供端到端的传输服务&#xff0c;通信子网是由用作信息交换的网络节点和通信线路所组成的独立的数据通信系统。它承担着全网的数据传输、转接和加工变换等通信处理工作。如图 通信子网…

【前端工程化】Verdaccio搭建本地npm仓库

背景 Verdaccio 是一个 Node.js创建的轻量的私有npm proxy registry 我们在开发npm包的时候&#xff0c;经常需要验证发包流程&#xff0c;或者开发的npm包仅局限于公司内部使用时&#xff0c;就可以借助Verdaccio搭建一个npm仓库&#xff0c;搭建完之后&#xff0c;只要更改np…

力扣 700. 二叉搜索树中的搜索

题目来源&#xff1a;https://leetcode.cn/problems/search-in-a-binary-search-tree/description/ C题解1&#xff1a;二叉搜索树&#xff0c;右节点大于当前节点&#xff0c;左右节点小于当前节点&#xff0c;因此可以根据当前节点值与目标值的大小比较进行搜索。 class Sol…

【CSS】鼠标(移入/移出)平滑(显示/隐藏)下划线

文章目录 效果展示实现步骤1. 添加背景颜色2. 修改背景颜色3. 调整背景的大小4. 取消背景重复绘制5. 调小高度6. 设置背景绘制位置7. 隐藏背景8. 加入鼠标移入事件9. 平滑显示/隐藏下划线10. 调整一下背景图的位置11. 调整鼠标移入时进入的位置 效果展示 鼠标移入内容时&#…

基于matlab使用二维规范化互相关进行模式匹配和目标跟踪(附源码)

一、前言 此示例演示如何使用二维规范化互相关进行模式匹配和目标跟踪。该示例使用预定义或用户指定的目标以及要跟踪的类似目标的数量。归一化互相关图显示&#xff0c;当值超过设置的阈值时&#xff0c;将标识目标。 在此示例中&#xff0c;您使用规范化互相关来跟踪视频中…

行业云“组合拳”+AIGC开放战略,新华三的精耕务实之道

“今年或许不是实现宏伟目标的一年&#xff0c;但却是重新聚焦、重新调整和重新思考基础设施的时刻。”这是Gartner研究副总裁Paul Delory在谈到影响2023年云、数据中心和边缘基础设施趋势时所表达的观点&#xff0c;而影响趋势之一就是云团队将优化和重构云基础设施。对于企业…

爬虫入门指南:Python网络请求及常见反爬虫策略应对方法

文章目录 引言HTTP协议与请求方法HTTP协议请求方法 使用Python进行网络请求安装Requests库发送GET请求发送POST请求 反爬虫与应对策略IP限制使用代理IP&#xff1a; 用户代理检测设置User-Agent头部&#xff1a; 验证码参考方案 动态页面请求频率限制未完待续.... 引言 在当今…

1.盒子模型

页面布局要学习三大核心&#xff0c;盒子模型&#xff0c;浮动和定位.学习好盒子模型能非常好的帮助我们布局页面. 1.1看透网页布局的本质 网页布局过程: 1.先准备好相关的网页元素,网页元素基本都是盒子 2.利用CSS设置好盒子样式,然后摆放到相应位置 3.往盒子里面装内容. 网…

自定义MVC框架【上篇】--原理

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于自定义MVC的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.什么是自定义MVC框架&#xff1f; 二…

05 proxy代理、组件间的通信

React全家桶 一、脚手架配置代理(proxy)的方式 CORS: 请求url:http://www.baidu.com 发送url:http://www.jd.com response.setHeader(Access-Control-Allow-Origin,*);通过express快速搭建一个服务 创建一个图书组件 import React, { useEffect } from react import axio…

代码随想录算法训练营第51天 | 309.最佳买卖股票时机含冷冻期 + 714.买卖股票的最佳时机含手续费 + 股票问题总结

今日任务 目录 309.最佳买卖股票时机含冷冻期 - Medium 714.买卖股票的最佳时机含手续费 - Medium 股票问题总结 309.最佳买卖股票时机含冷冻期 - Medium 题目链接&#xff1a;力扣-309. 最佳买卖股票时机含冷冻期 给定一个整数数组prices&#xff0c;其中第 prices[i] 表…

字节测试工程师总结的自动化测试10个最佳实践

虽然大家都知道坚果是非常健康和有营养的&#xff0c;但是&#xff0c;当你尝试吃它的时候&#xff0c;我猜测过程都不会很顺利。 现实就是那么相似&#xff0c;我们都知道测试自动化对软件开发有好处&#xff08;就像坚果对我们的身体一样&#xff01;&#xff09;&#xff0…