Twitter Bootstrap：爲什麼隱藏的元素會影響佈局？

我有一個使用Twitter Bootstrap流體網格佈局系統的三列流體佈局。這三列由span4 div組成。我還使用了一個jQuery UI腳本，在該網格系統中爲另一個元素交換一個元素，這意味着，在短時間內，我的行中實際上隱藏了第四個元素。我會認爲這不會成爲問題，因爲隱藏的元素被隱藏起來（「display：none」）。Twitter Bootstrap：爲什麼隱藏的元素會影響佈局？

這裏有一個的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>

來源

2013-07-02 DavidH

因爲在引導這一規則的：

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

隱藏的元素仍然是:first-child。

來源

2013-07-02 16:46:16 kalley

哦，這很有趣。看起來實際上並不是第一個（hidden）元素是'：first-child'，而是第二個元素（第一個* visible *元素）不是*：first-child'。如果我將「margin-left：0」應用於第二個元素，則一切正常。現在，如果我只能更新/覆蓋該CSS選擇器以將該樣式應用於'：first-visible-child'，那我就是金。 – DavidH

你可以嘗試'.row-fluid [class * =「span」]。hide：first-child + [class * =「span」]'，儘管這是一個選擇器...... – kalley

下面是快速JavaScript修復：http://jsfiddle.net/dhilowitz/MvcdN/。由於這些隱藏元素將被動態創建，因此我可以添加此類，然後根據需要將其刪除。 – DavidH

Twitter Bootstrap：爲什麼隱藏的元素會影響佈局？

回答

相關問題