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

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

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

相关推荐
2501_947575803 小时前
计算机毕业设计之jsp开山车行二手车交易系统
java·开发语言·hadoop·python·信息可视化·django·课程设计
骑士雄师3 小时前
java面试题 4:鉴权
java·开发语言
Byron__4 小时前
AI学习_06_短期记忆与长期记忆
人工智能·python·学习
帅次4 小时前
Android 高级工程师面试:Java 基础知识 近1年高频追问 22 题
android·java·面试
蓝胖的四次元口袋4 小时前
Java集合(4)
java·哈希算法
2501_948106914 小时前
计算机毕业设计之基于jsp教科研信息共享系统
java·开发语言·信息可视化·spark·课程设计
TanYYF4 小时前
spring ai入门教程二
java·人工智能·spring
SeeYa-J5 小时前
Spring IOC(Inversion of Control)
java·spring·rpc
试剂界的爱马仕5 小时前
Anti-mouse PD-1 mAb (Clone RMP1-14) 与 Axitinib 小鼠实验使用方案整理汇总
大数据·人工智能·深度学习·学习
宠友信息5 小时前
多端数据互通场景下Spring Boot仿小红书源码结构设计
数据库·spring boot·redis·缓存·架构