부트 스트랩 행 유체 붕괴

Question

왜 두 번째 행에서 시작하는 이미지가 쓰러지기 시작하고 첫 번째 행처럼 보이지 않는지 이해할 수 없습니까?

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9 offset3"> 
     <?php 
     $step = 1; 
     do{ 
     echo <<<EOF 
     <div class="span4 {$class}" id="p{$rst_catalog['p_id']}"> 
     <a href="pillow.php?p_id={$rst_catalog['p_id']}"><img src="images/{$rst_catalog['p_img']}" alt="img" title="{$rst_catalog['p_name']}" /></a> 
     <div class="row"> 
     <div class="span12"> 
     <a href="pillow.php?p_id={$rst_catalog['p_id']}">{$rst_catalog['p_name']}</a> 
     {$rst_catalog['p_rubric']} 
     {$rst_catalog['p_price1']}.00 руб. 
     </div> 
     </div> 
     </div> 
     EOF; 
     if ($step == 4) 
      $step = 11; 
     else 
      $step++; 
     } while ($rst_catalog = mysql_fetch_assoc($res_catalog)); 
     ?> 
     <?php require_once ("inc/inc_show_pagination.php"); ?> 
     </div> 
    </div> 
</div> 

(이 PHP를 통해 생성 된) 코드의 나머지 부분은 여백 왼쪽 사용

Answer 1

here 찾을 수 있습니다 만 first-child 0 문제 이잖아

모든 id에 margin-left: 0을 추가하면 p1,p4,p7,p10..이 작동 중입니다.

스타일 :

.left-most{margin-left:0} 

<?php 
for($i=0;$i<10;$i++){ 
    $tst=$i/3; 
    if(!is_float($tst)){ 
     $class='left-most'; 
    }else{ 
     $class=''; 
    } 
?> 
<div class="span4 <?php echo $class; ?>">Your stuff here</div> 

<?php } ?> 

Answer 2

나는 똑같은 행동에 직면 해있다.

같은 행 안에 div를 캡슐화 할 때 다른 행을 만드는 것이 좋습니다. Divs는 하나의 행 (꽤 명백 함)을 차지하기로되어 있기 때문에 모든 요소에 여백 - 왼쪽이 있습니다. 줄 바꿈시이 margin-left가 유지되므로 div가 정렬되지 않습니다.

행당 3 개의 div를 삽입 할 수 있습니다.

즉

<div class="container-fluid"> 
    <div class="span10 row-fluid"> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    </div> 
    <div class="span10 row-fluid"> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    </div> 
    ... 
    </div> 

또 다른 옵션은 컨테이너 내부 된 div를 넣어하는 것입니다. div가 떠있는 경우에도 작동합니다.

<div class="container-fluid"> 

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