如何在 AdminLTE 3 中为 Yii2 框架设置侧边栏宽度

Posted 2023-05-08

【中文标题】如何在 AdminLTE 3 中为 Yii2 框架设置侧边栏宽度

【英文标题】：How to set sidebar-width in AdminLTE 3 for Yii2 Framework

【发布时间】：2021-11-12 00:03:17

【问题描述】：

有没有更快的方法在 AdminLTE 3 for Yii2 php Framework 上设置侧边栏宽度？

我的侧边栏上有这些子菜单，它们占用了很多空间：

我尝试在我的 css 文件中这样做：

.main-sidebar 
    width: 400px!important;


.sidebar 
    width: 400px!important;

它只是这样做：

让侧边栏和品牌链接更宽的最佳解决方法是什么？

更新： 我将我的自定义 css 编辑如下：

.nav-sidebar>.nav-item .nav-icon 
    margin-left: 0rem!important;
    font-size: 1.2rem;
    margin-right: 0rem!important;
    text-align: center;
    width: 1.6rem!important;


.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link 
    width: calc(300px - .5rem * 2)!important;


.sidebar-collapse.sidebar-mini .main-sidebar .sidebar 
    width: calc(300px - .5rem * 2)!important;


aside 
    width: 300px!important;


body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header 
    transition: margin-left .3s ease-in-out;
    margin-left: 300px!important;


.layout-navbar-fixed .wrapper .brand-link 
    width: 300px!important;


.navbar-nav>.navbar-item>.navbar-link 
    display: none!important;

侧边栏变宽了，但现在不会折叠了，像这样：Sidebar Not Collapsing。

这里的问题可能是什么原因造成的？

【参考方案1】：

这是因为您在定义宽度时使用了!important;。 .sidebar-collapse 类不能更改定义为重要的宽度。

【参考方案2】：

非常感谢您的朋友，在我的情况下，我想减小尺寸，为此我已经使用了您的代码，并且我已将 300px 更改为 230px，因为它的默认尺寸是 250px，当它折叠或单击响应时按钮，宽，我留下我的代码以防它适用于其他人：

侧边栏大小宽度：230px

/*sidebar width*/
aside width: 230px!important;
.sidebar-collapse asidewidth:73px !important;
/*content margin-left*/
.sidebar-mini-md .content-wrapper, .sidebar-mini-md .main-footer, .sidebar-mini-md .main-headermargin-left: 230px !important;
.nav-sidebar>.nav-item .nav-icon 
    margin-left: 0rem!important;
    font-size: 1.2rem;
    margin-right: 0rem!important;
    text-align: center;
    width: 0.6rem!important;


.sidebar-mini .main-sidebar .nav-link,
.sidebar-mini-md .main-sidebar .nav-link,
.sidebar-mini-xs .main-sidebar .nav-link 
    width: calc(230px - .5rem * 2)!important;


.sidebar-collapse.sidebar-mini .main-sidebar .sidebar 
    width: calc(230px - .5rem * 2)!important;


body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header 
    transition: margin-left .3s ease-in-out;
    margin-left: 230px!important;


.layout-navbar-fixed .wrapper .brand-link 
    width: 230px!important;


.layout-fixed .brand-link
    width:230px !important;

.navbar-nav>.navbar-item>.navbar-link 
    display: none!important;