Twitter Bootstrap:为什么隐藏元素会影响布局？

Question

我使用Twitter Bootstrap的流体网格布局系统进行了三列流体布局.这三列由span4div组成.我也在使用一个jQuery UI脚本,在该网格系统中将一个元素交换为另一个元素,这意味着,在短时间内,我实际上在我的行中有一个隐藏的第四个元素.我原以为这不会是一个问题,因为隐藏的元素是隐藏的("display:none").

这是一个jsfiddle:http://jsfiddle.net/dhilowi​​tz/cfZwv/6/

我的问题是:

为什么行中的元素不显示为行？如果我把那个隐藏的元素拿出来,一切都很美妙.把它放回去,我的行中断并显示为两行.

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="hide"><h2>Item 1A</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <div class="span4 element"><h2>Item 1B</h2>This is a node that should be treated exactly like the other ones.</div>
        <!--/span-->
        <div class="span4 element"><h2>Item #2</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
        <div class="span4 element"><h2>Item #3</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div>
        <!--/span-->
    </div>
    <!--/row-->
</div>

Answer 1

由于引导程序中的这个规则:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

隐藏的元素仍然是:first-child.