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

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

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

相关推荐
报错小能手1 分钟前
ios开发方向——swift并发进阶核心 Task、Actor、await 详解
开发语言·学习·ios·swift
凯尔萨厮2 分钟前
创建Web项目(Maven管理)
java·maven·web
EnglishJun13 分钟前
ARM嵌入式学习(十九)--- 字符设备驱动的注册与调用流程
arm开发·学习
yaoxin52112317 分钟前
381. Java IO API - 控制文件树遍历流程
java·开发语言
SimonKing19 分钟前
OpenCode 20 个斜杠命令,90% 的人只用过 3 个
java·后端·程序员
尽兴-19 分钟前
Spring与Dubbo整合原理与源码分析
java·spring·dubbo·enabledubbo
Gopher_HBo19 分钟前
BlockingQueue详解
java·后端
白露与泡影20 分钟前
为什么在IDEA使用@Autowired会报黄?
java·ide·intellij-idea
米糕闯编程20 分钟前
IDEA新建springboot项目
spring boot·后端·intellij-idea
我登哥MVP22 分钟前
【Spring6笔记】 - 15 - Spring中的八大设计模式
java·spring boot·笔记·spring·设计模式·intellij-idea