奇怪的Twitter Bootstrap行为

我一直在使用Twitter Bootstrap来放置一个PHP网站，我遇到了一些我无法修复的奇怪行为。我使用一个循环来创建图像框（下面有一个屏幕截图），但由于某种原因，循环创建了非常奇怪的对齐问题（我试图让它们在垂直列中）。所有的代码都在下面。如果任何人都可以帮助或指出我会朝着正确的方向发展，那将是非常棒的。在浏览器窗口中奇怪的Twitter Bootstrap行为

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

截图奇怪的现象：

来源

2013-02-28 Benedict Lewis

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

放入跨距2图像，一切都应该工作意。

来源

2013-02-28 09:15:57 Shail

完美，谢谢！ – 2013-02-28 09:20:35

欢迎您好友！为你创建一个jsfiddle以及..清理了一些代码.. – Shail 2013-02-28 09:24:00

嗨，抱歉再次打扰你，但我有另一个问题。目前我正在使用'foreach'循环来回显图像。我如何每六张图片插入一个'

' and '

'？ – 2013-02-28 09:27:20

您似乎具有的div和跨越开/错误的顺序关闭，可能是一个问题。至少它无效的HTML。

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

来源

2013-02-28 09:06:08 Lauri

刚才试过了，仍然有同样的问题:) – 2013-02-28 09:13:15

我会假设问题出现在css/html代码中。 – Lauri 2013-02-28 09:14:39

Yeap。我有一个与我的网站以前版本兼容的版本，并且该代码位于http://snippi.com/s/pzqw242，但即使将其复制并粘贴到新版本中，也不起作用。这表明这是我认为的CSS问题。 – 2013-02-28 09:18:35

奇怪的Twitter Bootstrap行为

回答

相关问题