Bootstrap 4 无内置侧边栏折叠逻辑，须用 CSS 媒体查询 + d-none/d-md-flex 控制显隐，或 checkbox hack 实现点击切换；height 过渡无效，应改用 max-height 或 transform 动画。
Bootstrap 4 本身不提供开箱即用的「侧边栏折叠收起」交互逻辑，必须靠 CSS 媒体查询 + display 控制显隐，再配合手动切换按钮（或 checkbox 模拟）来实现。纯 CSS 方案可行，但无法监听点击事件，所以“点击收起”这步绕不开 DOM 操作或 checkbox hack。
用 d-none + 断点类控制侧边栏显隐
这是最直接、兼容性最好、也最符合 Bootstrap 4 设计意图的方式：在小屏下彻底移除侧边栏的布局参与，而非仅视觉隐藏。
- 给侧边栏容器加
d-none d-md-flex（Bootstrap 4）——d-none在所有断点都隐藏，d-md-flex仅在 ≥768px（md）时启用 flex 并显示 - 主内容区必须同级包裹在
d-flex容器内，否则d-md-flex不生效 - 别用
col-sm-2 col-md-3这类栅格类替代：它只是让列变宽/变窄，DOM 仍在，会干扰焦点、滚动锚点和屏幕阅读器 - 如果侧边栏需要固定宽度（如 200px），加
style="width: 200px"或w-25+min-width: 200px，并务必加flex-shrink-0防止被压缩
用 checkbox + :checked 模拟点击展开/收起
纯 CSS 实现“点击按钮切换侧边栏”唯一可靠方式，无需 JS，兼容 IE9+。关键在于 DOM 顺序与选择器写法。
-
<input type="checkbox" id="sidebar-toggle">必须放在最前面，不能display: none，可用position: absolute; opacity: 0; pointer-events: none;隐藏但保留语义 -
<label for="sidebar-toggle"></label>包裹图标或文字，for值必须与input的id完全一致（大小写敏感） - 侧边栏容器用
#sidebar-toggle:checked ~ .sidebar控制显隐，注意是~（通用兄弟选择器），不是+ - 初始状态设
.sidebar { display: none; }；大屏下用@media (min-width: 768px) { .sidebar { display: block; } }覆盖 - 避免用
visibility: hidden或opacity: 0替代display: none——前者仍占布局空间，会导致点击穿透或滚动错位
为什么 height: 0 / height: auto 过渡会失效
想给侧边栏加展开动画？别直接对 height 做 transition。CSS 无法过渡 height: auto，浏览器不知道目标高度是多少。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是用
max-height：初始设max-height: 0，展开时设一个足够大的值（如max-height: 500px），再加transition: max-height 0.3s ease - 确保内容高度不超过设定的
max-height，否则会被截断；若不确定高度，改用transform: scaleY()+overflow: hidden更稳妥 - iOS Safari 对
max-height过渡支持不稳定，展开后可能出现滚动卡顿，此时建议降级为无动画的即时显隐 - 如果用了
flex布局，flex-grow和max-height可能冲突，优先保证max-height生效，必要时加overflow-y: auto控制内部滚动
真正容易被忽略的不是怎么写 class，而是「侧边栏是否该由 CSS 控制显隐，还是该交给 offcanvas 插件」——Bootstrap 4 没有内置 offcanvas，但 Bootstrap 5 有。如果你项目已升级到 Bootstrap 5，直接用 offcanvas 是更健壮的选择；还在用 4，就老实用 checkbox + d-none 组合，别硬套 flex 动画或 JS 模拟，容易在某个断点突然崩掉。
