如何在Twitter Bootstrap中正确嵌套行？

Question

TB使用12列网格系统。当一个人在a中嵌套一行时，比如span8，就像这样：

<div class="span8">
   <div class="row-fluid">
      <!-- what's the total of the span* here? -->
   </div>
</div>

跨度*的总和应该在嵌套行中？应该是8，因为容器是8？或者它应该是12，因为TB使用12列网格（意味着它在每个row和row-fluid内部产生12列网格，而不管容器是什么？）

Answer 1

如果使用普通.row，则不应超过包装器的span，否则块将溢出。

如果你使用.row-fluid，你应该总是加起来以占用整个父母。

这样的事情：

<div class='row'>
    <div class='span8'>
        <div class='row'>
            <div class='span8'>do not exceed span of parent (8)</div>
        </div>
        <br/>
       <div class='row-fluid'>
            <div class='span12'>always go to 12!</div>
        </div>
    </div>
</div>

和小提琴：http://jsfiddle.net/2VF6B/

Answer 2

流体或固定布局不同。

如果您在固定布局中使用span8，则它的宽度始终相同 - 770px。嵌套行最多应包含8列，所以我们说span6+span2或span4+span4。

流体布局 - span8，然后它总是66,66%浏览器的宽度。嵌套行会将此span8的宽度计为100%，因此您可以使用嵌套的span12或span6+span6。

我希望它很清楚。