Bootstrap 的 collapse-horizontal 侧边栏动画出现卡顿或跳动，根本原因在于宽度计算不明确——由内边距、边框、Flex 布局嵌套及元素盒模型混用导致浏览器无法平滑过渡。本文提供可落地的 CSS 重构方案，聚焦于盒模型控制与 display 行为调整。
bootstrap 的 `collapse-horizontal` 侧边栏动画出现卡顿或跳动，根本原因在于宽度计算不明确——由内边距、边框、flex 布局嵌套及元素盒模型混用导致浏览器无法平滑过渡。本文提供可落地的 css 重构方案，聚焦于盒模型控制与 display 行为调整。
在使用 Bootstrap 5 的 collapse-horizontal 实现响应式侧边栏时，开发者常遇到「动画不连贯、突然跳变」的问题：侧边栏展开瞬间宽度“闪动”或内容错位，即使已添加 transition: 0.75s 也无改善。这并非 JavaScript 控制逻辑缺陷，而是 CSS 盒模型与布局上下文冲突引发的渲染歧义。
? 根本原因分析
动画跳动的核心症结在于：
- col-auto 容器本身不设固定宽度，其子元素（如 .collapse-horizontal 内部的 .show 区域）若同时应用 padding、border 和 flex-* 类，会导致浏览器在 width 过渡过程中反复重排（reflow），尤其当 padding 参与尺寸计算时，collapse-horizontal 的底层宽度动画（基于 width + overflow-x 隐藏）会因盒模型边界模糊而失准；
- Bootstrap 的 collapse-horizontal 依赖 width 属性过渡，但 padding 和 border 默认属于 box-sizing: content-box（除非全局重置），因此 width 值变化时，实际占用空间 ≠ width 值，造成视觉跳跃；
- flex-grow/flex-shrink 在 col-auto 上效果不可控，因其本质是分配剩余空间，而非定义绝对展开尺寸。
✅ 推荐解决方案：隔离盒模型，显式控制尺寸行为
关键改造思路是：将影响宽度计算的样式（padding、border）从参与动画的容器中剥离，并通过 display: inline-block 锁定内部内容的尺寸上下文，确保 width 过渡仅作用于清晰、自包含的盒子。
以下是核心修改点（对比原代码）：
<!-- ❌ 原问题结构（动画跳动） -->
<div class="col-auto px-0 bg-dark" id="navigation">
<div id="sidebar" class="collapse collapse-horizontal">
<div class="show align-items-center ... h-100"> <!-- ⚠️ padding + flex + h-100 混用 -->
...
</div>
</div>
</div><!-- ✅ 修复后结构（平滑动画） -->
<div class="col-auto px-0 bg-dark border-end" id="navigation">
<div id="sidebar" class="collapse collapse-horizontal">
<!-- ✅ 关键：移除 h-100，改用 d-inline-block + 显式 padding -->
<div class="d-inline-block px-3 pt-2 align-items-center ... text-white">
...
</div>
</div>
</div>✨ 具体优化步骤：
将 border-end 从内部 .show 移至外层 col-auto 容器
→ 避免边框参与内部高度/宽度计算，且保持视觉完整性。移除内部 .show 的 h-100 类
→ h-100 在 flex 父容器中可能触发高度拉伸竞争，干扰宽度动画；改由 d-inline-block + align-items-center 自然撑高内容区。内部容器设为 d-inline-block 并保留 px-3 pt-2
→ inline-block 元素的宽度由其内容+内边距共同决定，且不会被父级 flex 布局强制压缩，使 collapse-horizontal 的 width 过渡有确定基准。-
确保 transition 作用于正确元素
Bootstrap 的 collapse-horizontal 已内置 transition: width 0.35s ease，无需额外添加；若需延长，建议统一覆盖：.collapse-horizontal.show { transition: width 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
? 注意事项与最佳实践
- 避免在 collapse-horizontal 内部使用 w-100、flex-fill 或 h-100：这些类会与动画宽度争夺空间控制权；
- 慎用 overflow-hidden 父容器包裹动画区域：可能裁剪过渡中的中间帧，建议仅在必要时加在最外层 col-auto；
- 图标字体（如 Bootstrap Icons）需确保加载完成：异步图标加载延迟可能导致首次展开时内容重排，建议预加载或使用 <link rel="preload">；
-
如需支持 RTL（右到左）布局，注意 collapse-horizontal 默认向右展开；若需反向，可添加自定义类：
.collapse-horizontal-rtl { transform-origin: right center; } .collapse-horizontal-rtl.show { transform: translateX(0); }
通过以上结构化调整，侧边栏动画将从「突兀展开」变为「丝滑伸展」，既保持 Bootstrap 的语义化类名优势，又规避了 Flex + Collapse 组合下的常见渲染陷阱。本质上，这是对 CSS 渲染管线的一次精准干预——让浏览器始终清楚「什么在变、怎么变、变多少」。
