iview 如何设置sider宽度

iview layout组件中,sider设置了默认宽度和最大宽度,在css样式文件中修改无效,原因是iview默认样式设置在了element.style中,只能通过行内样式修改

样式如下:


image.png

image.png

修改方式:

1.官方文档中写明修改宽度通过传参数width实现


image.png

详见iview组件 layout部分
布局 Layout - iView (iviewui.com)

2.使用行内样式覆盖源样式

复制代码
<sider style="width: 300px;min-width: 300px;max-width: 300px;flex: 0 0 300px;">

补充:

神奇的技巧

如果想让sider的宽度自适应父元素,将width的值设置为空即可

代码:

复制代码
 <sider :width="''">

sider的class


image.png

原创
© 著作权归作者所有,转载或内容合作请联系作者

喜欢的朋友记得点赞、收藏、关注哦!!!

相关推荐
TeDi TIVE1 天前
springboot和springframework版本依赖关系
java·spring boot·后端
二哈赛车手1 天前
新人笔记---ES和kibana启动问题以及一些常用的linux的错误排查方法,以及ES,数据库泄密解决方案[超详细]
java·linux·数据库·spring boot·笔记·elasticsearch
嵌入式×边缘AI:打怪升级日志1 天前
嵌入式Linux开发核心自测题(全系列精华浓缩)
java·linux·运维
FQNmxDG4S1 天前
JVM内存模型详解:堆、栈、方法区与垃圾回收
java·jvm·算法
幸福巡礼1 天前
【LangChain 1.2 实战(一)】 概述
笔记·学习·langchain
jason.zeng@15022071 天前
Androidr入门环境搭建
java·kotlin
摇滚侠1 天前
整洁的桌面和任务栏 Java 开发工程师提效方法
java·开发语言
知识分享小能手1 天前
R语言入门学习教程,从入门到精通,R语言数据计算与分组统计(9)
开发语言·学习·r语言
每天都要加油呀!1 天前
多租户中间件适配
java·多租户
lizhihai_991 天前
股市学习心得—半导体12种核心材料
大数据·人工智能·学习