jquery - 当给 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，以便它越过下面的范围并且不会改变网格。

当此设置在不在页面最右角（在.row角上）的.span2元素中完成时，此设置可以很好地工作

您可以在此jsFiddle示例中看到此问题。您会看到单击“ Example＃1”可以正常工作，不会折叠父元素，而单击“ Example＃2”会使.span2元素折叠，使下一个.span2元素向上跳一行。

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

最佳答案

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

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

打开时：

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

收盘价：

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

这将迫使父元素具有固定的高度并且不塌陷。