Twitter Bootstrap 100％高度手风琴“跳跃” [英] Twitter Bootstrap 100% height accordion "jump"

问题描述

我试图使用Twitter Bootstrap崩溃组件实现100％高度的手风琴，完全如

手动设置 .accordion-inner 元素，如本答案所述。

然而，展开/折叠面板时遇到弹性行为。我已经从 .accordion-inner 元素中删除了所有填充/边距/边框，以消除这种可能性。

它在IE10中最为引人注目，但问题在Chrome中也很明显。

请参阅示例。

任何想法是什么导致这种跳跃行为？
我有类似的问题，并且注意到如果我从折叠的元素下面的元素中删除了一个margin-top，并用padding-top代替它，过渡很顺利。所以 - 检查相邻元素的边距，如果可能的话，尝试用填充替换它们。

I'm trying to implement a 100% height accordion using the Twitter Bootstrap collapse component, exactly as described in this question.

I'm manually setting the heights of the .accordion-inner elements as described in this answer.

However I'm experiencing "bouncy" behaviour when expanding/collapsing the panels. I have removed all padding/margin/border from the .accordion-inner elements to eliminate that possibility.

It is most noticeable in IE10, however the problem is also evident in Chrome.

See this example.

Any ideas what is causing this "jumpy" behaviour?

解决方案

Late to the party, but:

I had a similar problem, and noticed that if I removed a margin-top from the element below the collapsing one, and replaced it with padding-top, the transition was smooth.

So - check for margins on adjacent elements, and try replacing them with padding, if possible.

这篇关于Twitter Bootstrap 100％高度手风琴“跳跃”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！