侧边栏折叠后主内容区不自动适应，因未显式定义联动规则：fixed 定位需用 padding-left；flex 布局需配合 margin-left + transition 与兄弟选择器；width 动画须加 min-width: 0、overflow: hidden 及 overflow 过渡；按钮失灵多因 dom 绑定时机或选择器错误；aria-expanded 必须与 class 同步更新。
为什么侧边栏折叠后主内容区没跟着动？
多数人以为改完 .sidebar 宽度，.main-content 就会自动适应——其实不会。它不响应 class 切换，除非你显式告诉它怎么变。
关键在定位方式和联动规则：
- 如果侧边栏是
position: fixed，主内容区得用padding-left（不是margin-left），否则会被遮盖 - 如果用 flex 布局，主区设
flex: 1是静态分配，不随 sidebar class 变化重算；必须靠margin-left+transition配合兄弟选择器，比如：.sidebar.collapsed ~ .main-content { margin-left: 60px; } - 别漏写
transition: margin-left 0.3s ease，否则位移是瞬时的，没有动画 - 移动端小屏下，
@media (max-width: 768px)里建议直接设.sidebar { width: 0; overflow: hidden; }，避免 flex 计算异常
用 width 折叠为什么总“跳一下”或压不扁？
width 动画看着简单，但实际踩坑最多：flex 子项默认有 min-width: auto，哪怕你写了 width: 60px，浏览器也会优先按文字最小宽度撑开。
必须三件套齐上：
-
min-width: 0—— 强制允许压缩到设定值 -
overflow: hidden—— 加在侧边栏自身，否则图标/文字溢出 -
transition: width 0.3s ease, overflow 0.3s ease——overflow必须参与过渡，否则收起瞬间闪一下
另外，别用 width: 0。含 flex 子项或 inline-block 的菜单会崩布局；width: 60px（图标区宽度）更稳。
点击折叠按钮没反应？先查这三处
90% 的“按钮失灵”不是 JS 写错，而是 DOM 绑定时机或选择器断链。
- JS 执行时
document.querySelector('[data-sidebar-toggle]')拿不到元素 → 确保脚本放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
