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：为什么隐藏的元素会影响布局？

回答

相关问题