基於網格和堆棧的佈局與Twitter引導

Question

有沒有人試圖實現一個網格，在twitter引導堆棧佈局與Backbone.js集合？

演示：（無引導）

http://vandelaydesign.com/demos/list-grid-view/index.html

列表佈局呈東西下面的標記來實現集合中的每個模型。

<div class="row"> 
<div class="span12"> 
</div> 
</div> 

即使將行中的模型數設置爲固定，網格佈局看起來更加複雜。假設我渲染每行4個模型這裏所需要的標記

<div class="row"> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    <div class="span3"></div> 
</div> 

產生上述標記是真的很難，因爲我有一個<div class="row">包4 div's with class span3。

我該如何去做這件事？

Answer 1

你會想要使用CSS僞類:nth-child來實現這一點。這裏是你的HTML：

<div class="row column3"> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    <div class="span3"></div> 
</div> 

唯一改變的是增加了column3類。這裏有你需要的CSS：

.column3 > div:nth-child(3n+4) { 
    clear: left; 
} 

這應該告訴每一個元素後每3個元素清除到下一行給你一個3欄佈局。