Yii2框架下AdminLTE 3设置侧边栏宽度及折叠失效问题排查

折叠失效原因 #

你现有代码的核心问题是使用!important强制给所有状态下的侧边栏、brand-link、内容区左边距设置了固定宽度，完全覆盖了AdminLTE原生折叠逻辑对应的样式：

• 侧边栏折叠时会自动给body添加.sidebar-collapse类，原生会将侧边栏宽度改为折叠态的窄宽度，但是被你全局设置的aside { width: 300px!important; }规则覆盖
• 折叠状态下内容区的margin-left应该同步调整为折叠侧边栏的宽度，也被你全局设置的margin-left: 300px!important规则覆盖

兼容折叠功能的宽度设置方案 #

直接替换你之前的自定义CSS为以下内容即可，不需要修改AdminLTE核心代码，也兼容Yii2常用AdminLTE扩展的默认配置，你可以根据需求自行调整代码中的300px为目标宽度：

/* 仅对展开状态的侧边栏、顶部品牌栏设置宽度 */
body:not(.sidebar-collapse) .main-sidebar,
body:not(.sidebar-collapse) .brand-link {
    width: 300px !important;
}

/* 展开状态下内容区、顶部导航的左边距同步匹配侧边栏宽度 */
body:not(.sidebar-collapse):not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper,
body:not(.sidebar-collapse):not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
    margin-left: 300px !important;
}

/* 可选：调整侧边栏菜单图标排版，适配宽侧边栏显示 */
.nav-sidebar>.nav-item .nav-icon {
    margin-left: 0;
    margin-right: 0.5rem;
    width: 1.6rem;
    text-align: center;
}

该方案仅作用于侧边栏展开状态，不会覆盖AdminLTE原生的折叠逻辑、过渡动画，调整后侧边栏的折叠功能会恢复正常。

内容的提问来源于stack exchange，提问作者Safira