1

我一直在使用 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

浏览器中奇怪行为的截图：

4

2 回答 2

2

Jsfiddle：带图像的演示

问题是您创建了单行并在其中实现了所有跨度列。网格只能有 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 中，一切都应该按预期工作。

于 2013-02-28T09:15:57.133 回答
0

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

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

于 2013-02-28T09:06:08.623 回答