Twitter Bootstrap 100% 高度手风琴“跳跃”

Posted 2023-03-24

【中文标题】Twitter Bootstrap 100% 高度手风琴“跳跃”

【英文标题】：Twitter Bootstrap 100% height accordion "jump"

【发布时间】：2013-05-14 22:08:30

【问题描述】：

我正在尝试使用 Twitter Bootstrap 折叠组件实现 100% 高度的手风琴，正如 question 中所述。

我正在手动设置.accordion-inner 元素的高度，如answer 中所述。

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

在 IE10 中最明显，但在 Chrome 中也很明显。

看到这个example。

任何想法是什么导致了这种“跳跃”的行为？

【问题讨论】：

它适用于铬

我已经签入了 Chromium 并且底部的“反弹”仍然存在。

是的，你是对的，没有注意到它。但坏消息是在 boostrap 文档中也有一个“反弹”：查看twitter.github.io/bootstrap/javascript.html#collapse

是的，我明白你的意思。它并不常见，所以我没有注意到它，并认为这可能与我试图使其高度为 100% 有关。

请参阅***.com/a/33697157/2208713 - 我尝试了为这个问题提供的所有解决方法答案，并发现这个答案实际上在另一个线程中有效。它归结为不直接填充扩展部分（例如面板主体），而是使用具有填充的容器 div

【参考方案1】：

聚会迟到了，但是：

我有一个类似的问题，并注意到如果我从折叠元素下方的元素中删除一个 margin-top，并用 padding-top 替换它，过渡是平滑的。

所以 - 检查相邻元素的边距，如果可能，尝试用填充替换它们。

【讨论】：

对我来说很相似，但它是 .collapse div 周围的边距。我有一个包含两个类的 div：.content 和 .collapse。 .content 有边距。我将这两个类分成两个单独的 div，.collapse 包装 .content

【参考方案2】：

我认为您看到的“跳跃”是由于 .collapse 类的 CSS 转换造成的。

如果您查看此 SO 线程 Turning off Twitter Bootstrap Navbar Transition animation，您可以了解如何使用覆盖 CSS 类“no-transition”来禁用转换。这不会同时停止动画，但会加快动画速度，从而使跳跃不那么明显......

将no-transition 添加到您的手风琴体元素中......

<div id="collapseOne" class="accordion-body collapse in no-transition">

添加 CSS..

.no-transition 
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;

更新了 plunker.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

【讨论】：

谢谢，但理想情况下我想保留动画（我不再看到）。你是说你认为这不可能吗？

您可以尝试通过增加过渡上的s 来减慢动画速度，但无论哪种方式我认为过渡都会导致“跳跃”

删除动画将“修复”问题，就像关闭某种警告将修复警告所警告的问题一样。不知道 272k 的用户是怎么回复这样的答案的……

@alexandernst 这是对 Bootstrap 2.x 的建议，近年来并不相关。感谢您抽出时间对我 7 年前的建议投反对票。

【参考方案3】：

HTML：

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a>
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS：

 .collapse.in
    padding-bottom:5px;
 

【参考方案4】：

我遇到了这种奇怪的行为，手风琴会展开到比实际可见内容大得多的高度，然后折叠（跳转）回实际可见内容高度。

事实证明，该面板的手风琴主体有一些空的 html 元素，在我的例子中是一些 divs 和 col-sm-4 类，它们里面什么都没有。一旦我将它们注释掉，这种跳跃行为就停止了。希望这对有类似问题的人有所帮助。