Strange Twitter Bootstrap Behavior

Question

Я использую Twitter Bootstrap, чтобы собрать сайт 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="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> 

Вы можете организовать ваши изображения следующим образом

<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> 

Поместите изображения в Span2 и все должно работать предназначена.

Answer 2

Похоже, у вас возникли дивы и охватывает открытия/закрытия в неправильном порядке , может быть проблемой. Его по крайней мере недействительный html.

Вы открываете их в порядке <div>,<span>,<div>, но закрываете в </span>,</div>,</div>.