Question

我使用Twitter Bootstrap的流体网格布局系统进行三列流体布局。这三列由span4 div组成。我也在使用一个jQuery UI脚本，在该网格系统中将一个元素交换为另一个元素，这意味着，在短时间内，我实际上在我的行中有一个隐藏的第四个元素。我原以为这不会是一个问题，因为隐藏的元素是隐藏的（“display：none”）。

这是一个jsfiddle：http://jsfiddle.net/dhilowitz/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

由于bootstrap中的这个规则：

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

隐藏元素仍然是:first-child。

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

1 个答案: