jquery - 当 child 被赋予绝对位置时，Bootstrap 跨度会崩溃

Question

我正在使用一个 Bootstrap 行，并给它更多它应该有的 span child ，因为我发现这有助于让一个很好的网格工作，同时保持响应能力。

每个元素都有一个子元素，以及一个使用 jQuery 显示的元素，如下所示:

<div class="row">

<div class="span2">
    <div class="inner-element">
         Content here
         <div class="hidden-element">
               More content here
         </div>
    </div>
</div>
...

</div>

当 .span2 中的某个按钮被点击时，.hidden-element div 随 slideDown(); 增长，而内部 -元素获取 position:absolute CSS，以便它遍历下方的跨度并且不会改变网格。

当它在不在页面最右 Angular (在 .row 的 Angular 上)的 .span2 元素中完成时，此设置工作得很好

你可以在这个jsFiddle中看到这个问题例子。您可以看到点击“Example #1”工作正常，没有折叠父元素，而点击“Example #2”会使 .span2 元素折叠，使下一个 .span2 元素向上跳一行。

这是什么原因，我该如何解决？

Answer 1

显然问题在于 .span2 元素的 height 属性折叠。在动画之前通过 JavaScript 综合设置高度可以达到目的，如 this jsFiddle example 所示。 .因此，制作动画的正确方法是:

var box = item.closest('.span2');

打开时:

box.css("height", box.height()+"px");

关闭时:

box.css("height", "auto");

这会强制父元素具有固定的高度并且不会折叠。