부트 스트랩에서 동적으로 행 div를 닫습니다.

Question

저는 부트 스트랩을 시험 사용해보기에 좋았지 만 해결하기가 너무 어려워 보이는 것 같습니다.

필자는 벽돌과 같은 형식으로 3 개의 열을 표시하고 새로운 행을 무한정 반복합니다.

<div class="container-fluid"> 
<div class="row"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 
<div class="row"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 
<div class="row"> 
    <div class="span4"></div> 
    <div class="span4"></div> 
    <div class="span4"></div> 
</div> 

하지만 (예 : 레일 등) 내 코드의 관점에서 의미 하는가 :

x x x 
x x x 
x x x 

어떤이 (내가 이해까지로) 부트 스트랩에 다음과 같이 코딩되어야한다 , 매 3 시간마다 모니터 한 다음 행을 닫고 새 것을 시작하는 일종의 루프를 수행해야합니까? 나는 이것이 부트 스트랩이 독자적으로 처리 할 수있는 것이라고 생각한다.

for($i=0;i<3;i++) { 
    do something 
} 

Answer 1

이 기능을 사용할 수 있습니까? http://jsfiddle.net/panchroma/9RrX7/

동적 콘텐츠를위한 새 컨테이너를 만들고 모든 것을 동일한 행에 덤프하면됩니다. 그런 다음 CSS : n 번째 자식 선택기를 사용하여 네 번째, 일곱 번째, ... 동적 콘텐츠 항목을 선택하고 CSS를 조정하여 플로팅이 올바르게 작동하도록합니다.

플로팅을 확인하고 크기 조정이 제대로 작동하는지 몇 가지 추가 콘텐츠가 포함되었습니다.

CSS

.dynamic .row .span4:nth-child(3n+4) { 
clear:both; 
} 

HTML

<div class="container-fluid"> 
<div class="row"> 
<div class="span4">X</div> 
<div class="span4">X</div> 
<div class="span4">X</div> 
</div> 
<div class="row"> 
<div class="span4">X</div> 
<div class="span4">X</div> 
<div class="span4">X</div> 
</div> 
<div class="row"> 
<div class="span4">X</div> 
<div class="span4">X</div> 
<div class="span4">X</div> 
</div> 
</div> 

</div><!-- end container --> 

<div class="container-fluid dynamic"> 
<div class="row"> 

<div class="span4"></div> 
<div class="span4"></div> 
<div class="span4"></div> 
<!-- repeat as req'd --> 
</div><!-- end row --> 
</div><!-- end container --> 

============================== =============================

동적 HTML은 javascript 또는 php를 사용하여 추가 할 수 있습니다. 예를 들어 PHP를 사용하고 있고, 내용이 데이터베이스에서오고 있으며, 부트 스트랩 페이지가 .php라고 가정 해 봅시다.

부트 스트랩 페이지의 일반적인 레이아웃이 같은 수 :이