奇怪的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行爲

回答

相關問題