이상한 트위터 부트 스트랩 행동

Question

나는 트위터 부트 스트랩을 사용하여 PHP 웹 사이트를 만들었으며 해결할 수없는 이상한 행동을 보았습니다. 루프를 사용하여 이미지 상자를 만듭니다 (아래 스크린 샷이 있습니다). 그러나 어떤 이유로 루프가 정말 이상한 정렬 문제를 만듭니다 (세로 열로 가져 오기 위해 노력하고 있습니다). 모든 코드는 아래에 있습니다. 누구든지 도움이되거나 올바른 방향으로 나를 가리킬 수 있다면 그것은 굉장 할 것입니다. 브라우저 창에

foreach ($media->data as $data) { 
     $x = $instagram->likeMedia($data->id); 
     $usr = $data->caption->from->username; 
     echo "<div class=\"span2\">"; 
     echo "<span style=\"text-align: center;\">"; 
     echo "<a href=\"{$data->link}\" target=\"_blank\">"; 
     echo "<div class=\"well\">"; 
     echo "<img src=\"{$data->images->thumbnail->url}\" alt=\"Loading...\">"; 
     echo "</a><br /><br /><a rel=\"tooltip\" title=\"Visit {$usr}'s Profile\" class=\"btn btn-primary btn-small\" href=\"http://instagram.com/{$usr}\">View Profile</a><br /></span>"; 
     echo "</div></div>"; 
     } 

HTML 코드 : 브라우저에서 이상한 행동의 http://snippi.com/s/dagwl09

스크린 샷 :

Answer 1

Jsfiddle는 : Demo with images

문제는 단일 행을 만들고 그 안에 모든 범위의 열을 구현 한 것입니다. 그리드는 단지 12 개의 콜을 가질 수 있고 당신은 18을 삽입 했으므로 그렇게 정렬하지 않을 것입니다. 다른 사용자가 닫는 태그가 잘못된 방식으로 닫히고 있다고 올바르게 언급했습니다.

<div class="row-fluid"> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
</div> 
<div class="row-fluid"> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 
    <div class="span2"></div> 

놓고 다음과 같은 방법으로

이

<div class="span2"> 
<span style="text-align: center;"><a href="http://instagr.am/p/WQok38nelp/" target="_blank"> 
    <div class="well"> 
     <img src="http://distilleryimage1.s3.amazonaws.com/8b0f6290815811e2b55e22000a9f09fb_5.jpg" alt="Loading..."></a><br /><br /><a rel="tooltip" title="Visit youtayloratsix's Profile" class="btn btn-primary btn-small" href="http://instagram.com/youtayloratsix">View Profile</a><br/> 
    </div> 
</span> 
</div> 

당신은 당신의 이미지를 준비 할 수있는 span2의 이미지를 모든 것이 같이 작동합니다 :

귀하의 행의 열은 다음과 같아야합니다 예정된.

Answer 2

당신이 div의가있는 것 같은데 잘못된 순서로 폐쇄/개방에 걸쳐 문제가 될 수 있습니다. 그것의 적어도 잘못된 html.

<div>,<span>,<div>의 순서로 열지 만, </span>,</div>,</div>으로 끝납니다.