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

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

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

相关推荐
恸流失13 分钟前
java基础-1 : 运算符
java·开发语言·数据结构
柳如烟@29 分钟前
零基础入门Java虚拟机与单例模式:新手友好教程
java·开发语言·单例模式
三翼鸟数字化技术团队35 分钟前
😱 从Bug到解决方案:一个Java工程师与Emoji的"爱恨情仇" 🔥
java
泉城老铁1 小时前
Spring Boot整合Redis实现订单超时自动删除:从原理到实战
java·后端·架构
掘技术1 小时前
基于Maven/Gradle多模块springBoot(spring-boot-dependencies)项目架构,适用中小型项目
java
泉城老铁1 小时前
Spring Boot深度整合RabbitMQ:从入门到企业级实战
java·后端·rabbitmq
浩星1 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin1 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序
勤匠1 小时前
spring shell 基础使用
java·linux·spring
前端开发爱好者1 小时前
Vue3 开发新选择:又一 Hooks 神库开源!
前端·javascript·vue.js