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

Question

TB使用12列網格系統。當一個嵌套內的一排，說，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，你應該總是加起來12來佔據整個家長。

事情是這樣的：

<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。

我希望它很清楚。