Question

我正在使用一个引导行，并且给它提供了更多应该拥有的子项，因为我发现这有助于在保持响应性的同时获得良好的网格效果。

每个元素都有一个子元素，以及一个使用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，这样它就会越过下面的跨度，不会改变网格。

当在.span2元素中完成时，此设置完全正常，该元素不在页面的最右边（.row的角落）

您可以在此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");

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

当孩子被给予绝对位置时，Bootstrap跨度崩溃

1 个答案: