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

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

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

相关推荐
二狗哈18 分钟前
制作一款打飞机游戏87:最后冲刺
java·前端·游戏
Chesnut.30 分钟前
【2025.08.06最新版】Android Studio下载、安装及配置记录(自动下载sdk)
android·java
jackson凌1 小时前
IDEA快捷键壁纸分享
java·ide·intellij-idea
曼波の小曲1 小时前
运维学习Day20——MariaDB数据库管理
运维·数据库·学习
前端小巷子1 小时前
Vue嵌套路由
前端·vue.js·面试
静谧之心1 小时前
分层架构下的跨层通信:接口抽象如何解决反向调用
java·开发语言·设计模式·架构·golang·k8s·解耦
摸鱼一级选手1 小时前
Java 集合框架深层原理:不止于 “增删改查”
java·开发语言·后端
Derek_Smart1 小时前
从零构建高并发锁工具:基于AOP与ReentrantLock的轻量级分布式锁实践
java·jvm·spring boot
小李同学_LHY4 小时前
Redis一站式指南二:主从模式高效解决分布式系统“单点问题”
java·数据库·redis·缓存