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

问题是您已创建了一行并在其中实现了所有span列。网格只能有12个cols，你已插入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和跨度以错误的顺序打开/关闭，可能是一个问题。它至少是无效的HTML。

您要按<div>,<span>,<div>的顺序打开它们，但在</span>,</div>,</div>中结束。

奇怪的Twitter引导行为

2 个答案: