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

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

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

相关推荐
wangchunting3 分钟前
Jvm-垃圾回收算法
java·jvm·算法
Java面试题总结5 分钟前
新人笔记之模板方法模式
java·笔记·模板方法模式
NGC_66117 分钟前
深入理解 Java 线程池:从原理到实战
java·开发语言·python
人道领域9 分钟前
Day | 10【苍穹外卖:SpringTask 和WebSocket 案例】
java·数据库·后端
白宇横流学长9 分钟前
基于SpringMVC 的景区智能客流预测系统设计与实现
java
1104.北光c°10 分钟前
Leetcode206.反转链表 迭代+递归 【hot100算法个人笔记】【java写法】
java·数据结构·笔记·算法·leetcode·链表·反转链表
MegaDataFlowers11 分钟前
静态/动态代理模式
java·开发语言·代理模式
早睡早起好好code11 分钟前
InternNav 论文回看
笔记·python·深度学习·学习·算法
Aliex_git13 分钟前
前端监控笔记(一)
前端·笔记·学习