使用el-row及el-col页面缩放时出现空行解决方案

news2025/1/17 17:54:04

问题:

当缩放到90%或者110%,选中下拉后,下方就会出现空行

 如下图所示:

关于el-row 和 el-col :

参数说明类型可选值默认值
span栅格占据的列数number24
offset栅格左侧的间隔格数number0
push栅格向右移动格数number0
pull栅格向左移动格数number0

el-row 和 el-col 应该配合使用,并且 el-col 应该包含在 el-row 中。

同时,检查 el-col 的 span 属性或者offset属性是否设置正确,它决定了列在栅格系统中的宽度占比

如果为 row 或 col 设置了固定的宽度或高度,当页面缩放时,这些固定尺寸的元素可能无法适应新的容器大小,从而导致布局问题空行出现。

代码如下: 

<div v-show="radioActive == '2'">
<el-row >
  <el-col  :span="10" :offset="1" v-for="(item,index) in temList" :key="index">
              <el-form-item :label="`${item.printTitle}`" label-width="110px">
                <el-select
                  v-model="item.printId"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(v,i) in temList[item.moduleType]"
                    :key="i"
                    :label="v.moduleName"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
</el-row >
</div>

解决方案:

使用弹性盒子自动换行即可

display: flex;
flex-wrap: wrap;

 完整代码如下:

<el-row >
<div v-show="radioActive == '2'" style=" display: flex;flex-wrap: wrap;">
  <el-col  :span="10" :offset="1" v-for="(item,index) in temList" :key="index">
              <el-form-item :label="`${item.printTitle}`" label-width="110px">
                <el-select
                  v-model="item.printId"
                  clearable
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(v,i) in temList[item.moduleType]"
                    :key="i"
                    :label="v.moduleName"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
</div>
</el-row >

其他情况:

  1. 百分比宽度/高度:如果使用的是百分比宽度或高度,并且这些百分比是基于某个父元素的,那么当父元素的大小改变时(例如页面缩放),子元素的大小也会相应改变。但如果计算不当或存在其他布局问题,也可能导致空行的出现。
  2. 浮动与清除:使用浮动布局时,如果没有正确清除浮动,可能会导致布局问题。空行可能是由于浮动元素未能正确占据其应有的空间或位置。
  3. 外边距/内边距重叠:CSS中的外边距(margin)和内边距(padding)可能会在某些情况下重叠,导致看似有空行但实际上是由 内外边距 重叠导致的 布局异常。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1518912.html

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

相关文章

计算机网络 谢希仁(001-2)

计算机网络-方老师 总时长 24:45:00 共50个视频&#xff0c;6个模块 此文章包含1.5到1.7的内容 1.5计算机网络类别 连通 共享 分类方法 广域网是边缘部分和核心部分的核心部分 以前是拨号连接 现在是光纤 总线型 星型 环形网 1.6计算机网络的性能 带上单位之后就不是…

MySQL删除数据 文件大小不变的原因以及处理空洞问题

数据删除流程 InnoDB 里的数据都是用 B 树的结构组织的。 假设&#xff0c;我们要删掉 R4 这个记录&#xff0c;InnoDB 引擎只会把 R4 这个记录标记为删除。如果之后要再插入一个 ID 在 300 和 600 之间的记录时&#xff0c;可能会复用这个位置。但是&#xff0c;磁盘文件的大…

寻找用户痛点塑造产品价值 4大注意事项

移动互联网时代&#xff0c;用户价值不言而喻&#xff0c;只有拥有用户思维&#xff0c;寻找到用户痛点&#xff0c;塑造出产品价值&#xff0c;才能打造出爆款产品。因此要塑造产品价值&#xff0c;核心是寻找用户痛点。如果没有找到用户痛点&#xff0c;意味着产品无法满足用…

鸿蒙原生应用再添一批新丁!阿里旗下11款应用、广汽传祺、岚图汽车、零跑汽车、凯翼汽车 入局鸿蒙

鸿蒙原生应用再添一批新丁&#xff01;阿里旗下11款应用、广汽传祺、岚图汽车、零跑汽车、凯翼汽车 入局鸿蒙 来自 HarmonyOS 微博近期消息&#xff0c;阿里旗下闲鱼、1688、飞猪、饿了么、盒马、菜鸟、点淘、淘宝特价版、大麦、淘票票、灯塔专业版共11款大家耳熟能详的应用今…

vue防止用户连续点击造成多次提交

中心思想&#xff1a;在第一次提交的结果返回前&#xff0c;将提交按钮禁用。 方法一&#xff1a;给提交按钮加上disabled属性&#xff0c;在请求时先把disabled属性改成true&#xff0c;在结果返回时改成false 方法二&#xff1a;添加loading遮罩层&#xff0c;可以直接使用e…

【Vue3】路由的query参数和params参数

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

计算机毕业设计-神经网络算法及对未来一月的天气状况预测系统

概要 随着对气象各项数据的观测手段、技术上的提升&#xff0c;对于各项或取得数据种类&#xff0c;精度上都有着更好的超越&#xff0c;而对于气象温度进行预测是目前预测数据中最重要的需要解决的问题之一。 针对如何选择预测一个月内的天气情况&#xff0c;本次利用神经网络…

Keil5----生成lib文件和lib文件的使用

Keil5编译环境搭建----教程目录 Keil5----生成lib文件 将.c文件生成为.lib文件&#xff0c;实现程序代码的保密。具体步骤如下&#xff1a; 前言 User_LED.c文件如下&#xff0c;主要实现LED灯闪烁。 步骤1 步骤2 步骤3 步骤4 步骤5 Keil5----lib文件的使用 删除User_LED…

基于java的公寓报修管理系统设计与实现(程序+文档+数据库)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

滑动窗口最大值(leetcode hot100)

给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输入&#xff1a;nums [1,3,-1,-3,5,3,6,7], k 3 输…

【深度学习笔记】10_11 注意力机制

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 10.11 注意力机制 在10.9节&#xff08;编码器—解码器&#xff08;seq2seq&#xff09;&#xff09;里&#xff0c;解码器在各个时间…

微信小程序--开启下拉刷新页面

1、下拉刷新获取数据enablePullDownRefresh 开启下拉刷新&#xff1a; enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新 案例&#xff1a; 下拉刷新&#xff0c;获取新的列表数据,其实就是进行一次新的网络请求&#xff1a; 第一步&#xff1a;在.json文件中开…

分享6款非常优质炫酷的前端动画特效(附在线演示)

分享6款非常不错的项目动画特效 其中有three.js特效、canvas特效、CSS动画、SVG特效等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的 CSS33D海盗船动画 基于纯CSS3的3D海盗船动画&#xff0c;该动画分两部分&…

BUGKU-WEB No one knows regex better than me

题目描述 题目截图如下&#xff1a; 进入场景看看&#xff1a; 解题思路 看到此类题目&#xff0c;直接代码审计 相关工具 base64 在线加密https://www.mklab.cn/utils/regex 解题步骤 代码审计 <?php error_reporting(0); # 从请求中获取了两个参数&#xff1…

Servlet的book图书表格实现(使用原生js实现)

作业内容&#xff1a; 1 建立一个book.html,实现图书入库提交 整体参考效果如下: 数据提交后&#xff0c;以窗口弹出数据结果&#xff0c;如: 2 使用正则表达式验证ISBN为x-x-x格式&#xff0c;图书名不低于2个字符&#xff0c;作者不能为空&#xff0c;单价在【10-100】之间…

深入解析Arm架构:掌握汇编与逆向工程,提升设备安全性——蓝狐卷带你入门

写在前面 与传统的CISC&#xff08;Complex Instruction Set Computer&#xff0c;复杂指令集计算机&#xff09;架构相比&#xff0c;Arm架构的指令集更加简洁明了&#xff0c;指令执行效率更高&#xff0c;能够在更低的功耗下完成同样的计算任务&#xff0c;因此在低功耗、嵌…

用pyecharts的overlap绘制叠加图时,设置的颜色不起作用

问题 用pyecharts绘制叠加图时&#xff0c;如折线图上叠加散点图时&#xff0c;分别设置了自己的颜色&#xff08;三角是绿色&#xff0c;圆形是蓝色&#xff09;&#xff0c;但是渲染颜色和图例颜色不一致&#xff0c;如下图所示&#xff0c;折线颜色和散点颜色相同。 解决…

k8s集群部署elk

一、前言 本次部署elk所有的服务都部署在k8s集群中&#xff0c;服务包含filebeat、logstash、elasticsearch、kibana&#xff0c;其中elasticsearch使用集群的方式部署&#xff0c;所有服务都是用7.17.10版本 二、部署 部署elasticsearch集群 部署elasticsearch集群需要先优化…

VMware 配置虚拟机网络

之前需要完成的任务 &#xff08;1&#xff09;、下载和安装VMware-Workstation-Pro.exe软件&#xff0c;推荐16.0版本 &#xff08;2&#xff09;、下载centOS7镜像&#xff0c;可以在阿里云下载。 &#xff08;3&#xff09;、VM创建一个虚拟机&#xff0c;并且使用本地已下载…

IDEA配置JRebel热部署

插件仓库安装 打开IDEA&#xff0c;选择File—>Settings—>Plugins—>在右侧选择Marketplace&#xff0c; 在搜索框输入jrebel—>选择搜索结果—>点击Install JRebel激活 其中&#xff0c;Team URL可以使用在线GUID地址在线生成GUID 拿到GUID串之后&#xff…