Bootstrap崩溃有一个跳跃式的过渡

Question

我对引导导航栏的转换有问题.当折叠元素具有填充时,折叠具有跳跃过渡

我用谷歌搜索了这个问题,似乎问题是填充:

.menu-menu-container{
    padding: 100px 30px 60px 30px;
    background-color: yellow;
}

事实上,如果我从menu-menu-container元素中删除填充,动画效果很好,而且非常流畅

这是我的codepen> http://codepen.io/mp1985/pen/EyOJYE

如果没有这个奇怪的问题,我怎样才能达到相同的效果？

任何帮助,建议或建议？

Answer 1

问题是由正在折叠的容器的填充引起的.它使collapse.js计算高度变得复杂

例:

HTML

    <div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

如果将填充移动到内部容器,这将被修复:

HTML

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>