奇怪的 Twitter 引导行为

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

看起来您的 div 和 span 以错误的顺序打开/关闭，这可能是一个问题。它至少是无效的 html。

您按顺序打开它们<div>,<span>,<div>，但关闭</span>,</div>,</div>。