Twitter Bootstrap，造型和使用媒體網格類

我正在使用Twitter Bootstrap項目爲我的iPhone應用程序之一創建一個簡單（ish）網站。我已經創建了一個完整的網站，發現它很容易使用，但我有一些問題媒體網格。Twitter Bootstrap，造型和使用媒體網格類

我正在嘗試使用媒體網格類實現一排3張圖像。這些圖片的寬度爲280px，總共爲840px。容器寬940px，所以我有100px寬限用於填充等。我發現這非常困難，因爲當我查看該站點時，它將兩個圖像並排放置，然後在下一行放置第三個圖像。雖然有一些異常現象出現，

當我通過FTP發佈index.html和相關的css文件時，網站顯示圖像兩個並排，然後在第一個下面的下一行顯示第三個圖像。
當我在'Coda'（我用Mac編寫html和css的編輯器）預覽網站時，該網站看起來完全如何，所有3張圖像並排排列在一行中。

我試過了很多東西;

我試過在CSS中編輯.media-grid樣式，它似乎對網站的外觀沒有影響。即使我有大量的利潤或填充，它不會因爲某些原因而改變？
我已經嘗試將自己的id放到媒體網格類上，然後對這三個圖像進行造型然後我自己也對視覺效果沒有影響。

我已經使用下面的代碼插入我的圖像;

<div class="container"> 

    <ul class="media-grid" id="imagearray"> 
<li> 
    <img class="thumbnail" src="img/tweettimemainimage.png" alt=""> 
</li> 
<li> 
    <img class="thumbnail" src="img/tweettimemainimage.png" alt=""> 
</li> 
<li> 
    <img class="thumbnail" src="img/tweettimemainimage.png" alt=""> 
</li> 
</ul> 
</div>

我在CSS中丟失了什麼？我不熟悉CSS，所以我可以忽略一些東西？任何幫助，將不勝感激。

來源

2011-11-10 Paul Morris

編輯：我現在設法通過減少圖像的寬度來獲得一個行中的所有三個圖像。然而，他們都是左手邊的理由。我已經嘗試了餘量：auto;和margin-right：auto;並不會影響它。 –

要使默認樣式正常工作，您需要將<li> s用<a href>包裝起來。

例如

<ul class="media-grid" id="imagearray"> 
<li> 
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a> 
</li> 
<li> 
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a> 
</li> 
<li> 
<a href="#"><img class="thumbnail" src="img/tweettimemainimage.png" alt=""></a> 
</li> 
</ul>

來源

2011-11-28 14:16:19 user761399

Twitter Bootstrap，造型和使用媒體網格類

回答

相關問題