解决Bootstrap折叠按钮添加边距后切换时动画抖动问题

问题根源 #

Bootstrap的collapse组件依靠高度过渡动画实现展开收起，若直接给.skill-description添加padding或margin，这些属性会被计入元素总高度，动画过程中浏览器实时计算包含内外边距的高度时，易出现计算偏差，引发按钮区域抖动。

解决方案 #

1. 嵌套内层容器转移内外边距

不要直接给collapse元素加样式，而是在其内部嵌套一个div，将padding/margin移到内层元素上：

<div id="html" class="collapse skill-description" data-bs-parent="#skillContainer">
  <!-- 内层容器承载内边距样式 -->
  <div class="p-5">
    <h1>HTML</h1>
    <p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.</p>
  </div>
</div>

此时collapse元素的高度仅由内层容器决定，过渡动画计算更稳定，不会受内外边距干扰。

2. 用box-sizing优化高度计算（可选）

若必须给collapse元素加内边距，可添加CSS属性让内边距被包含在元素高度内：

.skill-description {
  box-sizing: border-box;
}

这种方法能减少高度计算偏差，但嵌套容器的方式兼容性和稳定性更优。

3. 将外边距移到父容器

如果需要外边距，把margin加到折叠元素的父容器（如.col）上，而非.skill-description本身：

<div class="col mb-3"> <!-- 把外边距加在父容器 -->
  <div id="html" class="collapse skill-description" data-bs-parent="#skillContainer">
    <div class="p-5">
      <h1>HTML</h1>
      <p>...</p>
    </div>
  </div>
</div>

这样不会影响折叠元素的高度计算，动画过程中父容器的位置不会干扰按钮区域。

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