当孩子被赋予绝对位置时，引导跨度崩溃答案

【问题标题】：Bootstrap span collapsing when child is given absolute position当孩子被赋予绝对位置时，引导跨度崩溃
【发布时间】：2013-04-17 23:44:14
【问题描述】：

我正在使用引导行，并为其提供更多应具有的跨度子项，因为我发现这有助于获得良好的网格工作，同时保持响应能力。

每个元素都有一个子元素，以及一个使用 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 元素跳上一行。

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

【问题讨论】：

标签： jquery css twitter-bootstrap css-position

【解决方案1】：

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

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

打开时：

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

关闭时：

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

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

【讨论】：