v2若依ruoyi侧边栏宽度更改记录

最新推荐文章于 2024-04-15 15:42:26 发布
最新推荐文章于 2024-04-15 15:42:26 发布
阅读量452 收藏
点赞数 3
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zfa5baiwan/article/details/137666062
版权
本文介绍了如何在RuoyiUI项目中通过修改`/bm-caa/ruoyi/ruoyi-ui/src/assets/styles/variables.scss`文件中的$base-sidebar-width全局变量来调整侧边栏的宽度。开发者可以直接在这个文件中找到并进行相应的设置。
摘要由CSDN通过智能技术生成

若依v2侧边栏的宽度全局修改 （可直接看结论）

总述：根据f12发现侧边是由.sidebar-container样式设置的

该设置样式的路径是在bm-caa/ruoyi/ruoyi-ui/src/assets/styles/sidebar.scss

由此可见侧边栏宽度的控制是由$base-sidebar-width全局变量控制 

设置该全局变量是在/bm-caa/ruoyi/ruoyi-ui/src/assets/styles/variables.scss 里修改即可

总结：在/bm-caa/ruoyi/ruoyi-ui/src/assets/styles/variables.scss 里修改$base-sidebar-width全局变量即可

zfa5baiwan
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
若依（ruoyi）框架包名修改器
12-28
仅支持ruoyi各版本的包名修改，不支持拓展版本如yudao系列包名
若依框架调整左侧导航栏宽度
傲骨雄风的博客
09-02 3191
若依
若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】
热门推荐
Start_Simple的博客
02-14 2万+
若依ruoyi修改样式
vue动态修改侧边菜单栏宽度
qq_24441205的博客
02-01 625
注：–base-sidebar-width 是scss中侧边菜单宽度变量。2.在data中定义宽度变量 sideWidth。1.添加可修改宽度的dom元素。
若依如何调整首页左侧菜单栏宽度？
猿小白的博客
12-22 3208
调整style.css对应样式宽度，例如宽度200修改成250 body.fixed-sidebar .navbar-static-side, body.canvas-menu .navbar-static-side { width: 250px; } nav .logo { width: 250px; } #page-wrapper { margin: 0 0 0 250px; }
CSS SASS calc() 计算表达式或使用变量
carbonzhao的专栏
09-19 1820
calc（）是css的一个函数，可用于元素计算长度，比如div宽度想要减去一个固定宽度后并自适应，可以写为calc(100% - 60px) 注意“-”两边有空格。sass已经是常用的预编译语言，允许使用变量等规则，如果上边写到60px是一个变量，这个表达怎么写呢。显然这样写是不行的，浏览器解析完是这样子的。
若依系统侧边菜单实现可拖拽宽度
最新发布
xiaoxuya_的博客
04-15 452
前端若依框架菜单可拖拽宽度
修改Element-ui中的Sidebar列表下拉框子项的宽度
CherishTaoTao的博客
06-24 3365
vue项目引入element-ui的侧边栏时，当调整sidebar侧边栏大小为180px时，下拉列表子项的宽度会超出（默认为200px）。如图所示：列表的默认样式中的子项宽度未能正确修改成和父级的一样， 即 < ul > 下的< li >未能和< ul >保持一样的宽度。1、浏览器F12打开元素选择，点击对应的元素选项： 2、找到样式区域，看准配置项： 3、根据提示找到路径： 4、打开css文件找到对应的配置项：...
若依（前后端分离版）如何去掉左边的侧栏以及顶栏
Shiny_boy_的博客
11-23 1859
若依（前后端分离版）如何去掉左边的侧栏以及顶栏。
更改滚动条样式
qq_42072040的博客
04-26 896
当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成：　　1、::-webkit-scrollbar   定义了滚动条整体的样式；    ...
若依ruoyi ruoyi-vue ruoyi-cloud 微服务全网最全视频教程网盘资源
12-25
若依ruoyi ，ruoyi-vue， ruoyi-cloud， 微服务全网最全视频教程网盘资源 RuoYi-Cloud 微服务版本视频课程目录 ├──01 项目概述.mp4 20.77M ├──02 微架构概念.mp4 20.99M ├──03 微架构及选型.mp4 21.19M...
若依RuoYi-Cloud微服务版本视频课程自学用
03-09
RuoYi-Cloud自学视频目录 ├──01 项目概述.mp4 20.77M ├──02 微架构概念.mp4 20.99M ├──03 微架构及选型.mp4 21.19M ├──04 目录文件介绍.mp4 17.16M ├──05 项目运行.mp4 108.31M ├──06 构建...
ruoyi 若依 集成 cesium supermap 超图 加载地图倾斜摄影
08-21
若依集成超图supermap 加载地图倾斜摄影
基于RuoYi（若依）的移动商城payshop
01-06
RuoYi（若依）是一个优秀的基于Spring Boot 和多平台的应用框架，payshop是基于RuoYi的优秀的移动商城系统。
基于若依框架搭建商业项目
乘风偷月的博客
07-04 1万+
RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框架|Java|SpringBoot|SrpingBoot2.0|SrpingCloud|Alibaba|MyBatis|Shiro|OAuth2.0|Thymeleaf|BootStrap|Vue|Element-
若依如何调整首页左侧菜单栏宽度
猿小白的博客
12-19 3255
调整style.css对应样式宽度，例如宽度200px修改成250px body.fixed-sidebar .navbar-static-side, body.canvas-menu .navbar-static-side { width: 250px; } nav .logo { width: 250px; } #page-wrapper { margin: 0 0 0 250px; }
若依修改侧边栏
qq_36022463的博客
01-16 810
引用：https://blog.csdn.net/Sabrina_cc/article/details/125871591。
若依框架---如何实现翻页保留选择？如何调整首页左侧菜单栏宽度？
02-21 1210
如何实现翻页保留选择？如何调整首页左侧菜单栏宽度？
若依框架侧边栏怎么增删
09-02
若依框架的侧边栏增删操作可以按照以下步骤进行： 1. 增加侧边栏：根据需求，在RuoYi-master\ruoyi-admin\src\main\java\com\ruoyi\system\config目录下的SysMenuConfig.java文件中新增菜单项。在该文件中，可以定义新的菜单项的名称、图标、访问路径等信息。 2. 删除侧边栏：根据需求，在RuoYi-master\ruoyi-admin\src\main\java\com\ruoyi\system\config目录下的SysMenuConfig.java文件中删除对应的菜单项。同时，需要注意删除对应的权限配置，以确保菜单项完全被删除。 需要注意的是，在增加或删除侧边栏时，还需要对应地修改权限配置文件和前端页面文件，以保持系统的一致性。通过以上步骤，您可以实现对若依框架的侧边栏进行增删操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【删除ruoyi中自己增加的菜单栏实例，以若依为例，所有版本适用】](https://blog.csdn.net/weixin_45114975/article/details/121530986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [二款android应用开发框架](https://download.csdn.net/download/xlwyztt/8580783)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值