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

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

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

相关推荐
老毛肚10 分钟前
手写mybatis
java·数据库·mybatis
两点王爷12 分钟前
Java基础面试题——【Java语言特性】
java·开发语言
choke23316 分钟前
[特殊字符] Python 文件与路径操作
java·前端·javascript
choke23321 分钟前
Python 基础语法精讲:数据类型、运算符与输入输出
java·linux·服务器
wqq631085528 分钟前
Python基于Vue的实验室管理系统 django flask pycharm
vue.js·python·django
Deng94520131431 分钟前
Vue + Flask 前后端分离项目实战:从零搭建一个完整博客系统
前端·vue.js·flask
岁岁种桃花儿32 分钟前
CentOS7 彻底卸载所有JDK/JRE + 重新安装JDK8(实操完整版,解决kafka/jps报错)
java·开发语言·kafka
Hello.Reader1 小时前
Flink 文件系统通用配置默认文件系统与连接数限制实战
vue.js·flink·npm
roman_日积跬步-终至千里1 小时前
【Java并发】Java 线程池实战:警惕使用CompletableFuture.supplyAsync
java·开发语言·网络
毕设源码-钟学长1 小时前
【开题答辩全过程】以 基于Springboot的扶贫众筹平台为例,包含答辩的问题和答案
java·spring boot·后端