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

【问题标题】：How to set sidebar-width in AdminLTE 3 for Yii2 Framework如何在 AdminLTE 3 中为 Yii2 框架设置侧边栏宽度
【发布时间】：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。

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

【问题讨论】：

标签： php css yii2 adminlte

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

侧边栏大小宽度：230px

/*sidebar width*/
aside {width: 230px!important;}
.sidebar-collapse aside{width:73px !important;}
/*content margin-left*/
.sidebar-mini-md .content-wrapper, .sidebar-mini-md .main-footer, .sidebar-mini-md .main-header{margin-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;
}

【讨论】：