트위터 부트 스트랩이있는 그리드 및 스택 기반 레이아웃

Question

누구나 Backbone.js 컬렉션과 함께 트위터 부트 스트랩에서 그리드 스택 레이아웃을 얻으려고합니까?

데모 : (부트 스트랩없이)

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

목록 레이아웃은 컬렉션의 각 모델에 마크 업 아래에 달성하기 위해 동쪽이었다.

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

행의 모델 수가 고정되어 있어도 격자 레이아웃이 더 복잡해 보입니다. 나는 위의 마크 업을 생성 필요한 마크 업

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

여기에 행 당 4 개 모델을 렌더링하고 있어요 가정하면 정말 열심히 내가 <div class="row">에 4 div's with class span3 포장해야하기 때문이다.

어떻게해야합니까?

Answer 1

이렇게하려면 CSS 가상 클래스 :nth-child을 사용하는 것이 좋습니다. 유일하게 변경

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

는 column3 클래스의 추가이다 : 여기에 귀하의 HTML입니다. 여기에 당신이해야하는 CSS는 다음과 같습니다 각 3 요소는 당신에게 3 열 레이아웃을주는 다음 행으로 취소 후

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

이 모든 요소를 ​​말해야한다.