twitter-bootstrap - Twitter Bootstrap: 非表示の要素がレイアウトに影響するのはなぜですか?

Question

Twitter Bootstrap の流動グリッド レイアウト システムを使用して、3 列の流動レイアウトを作成しました。3 つの列はspan4div で構成されています。また、グリッド システム内で 1 つの要素を別の要素に交換する jQuery UI スクリプトも使用しています。つまり、短い期間、実際には行に 4 番目の要素が隠されています。非表示の要素は非表示 ("display:none") であるため、これは問題にはならないと思っていました。

ここに jsfiddle があります: http://jsfiddle.net/dhilowi ​​tz/cfZwv/6/

私の質問はこれです：

行の要素が行として表示されないのはなぜですか? その隠れた要素を取り除けば、すべてが美しく機能します。元に戻すと、行が壊れて 2 つの行として表示されます。

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>