Twitter Bootstrap Mediagrid /縮略圖和空白空間

我試圖讓電影管理器讓我再次使用rails再次工作。我正在從數據庫中讀取電影，並試圖在響應式網格中呈現他們的封面。Twitter Bootstrap Mediagrid /縮略圖和空白空間

我是新來的使用Twitter Bootstrap，並有一些怪異的間距奇怪的問題。我所有的圖像都是相同的高度和寬度，所以這不應該成爲問題。

要看到問題，請到這裏：http://jsfiddle.net/32AcT/（由於響應網格，你可能不得不做出視圖窗口大，所以他們不是都在一列。）我只是做：

<ul class="thumbnails"> 
    <li> 
    <a href="#"> 
     <div class="caption">2 Fast 2 Furious</div> 
     <img alt="2 Fast 2 Furious" class="thumbnail" height="111" src="http://cf2.imgobject.com/t/p/w500/4rDV8TgaILHRfX1IRgpysjkD9A0.jpg" width="74" /> 
    </a> 
    </li> 
... 
</ul>

這裏是什麼樣子（怪異的間距粉紅色框高亮顯示）的例子：我的理解 Example Image with highlighted issues

爲什麼寬度都關閉，由於標題長度比圖像的寬度更長（雖然我想以某種方式解決這個問題）。爲什麼會發生這種情況，並且有什麼好的方法來防止它發生？

來源

2013-04-24 mandreko

我認爲這是一個有點壞了https://github.com/twitter/bootstrap/issues/3494 – alkis 2013-04-24 04:20:43

試試這個我認爲這將解決您的prblem

http://jsfiddle.net/32AcT/1/

.thumbnails > li { width:100px; } 

.thumbnails .caption{ overflow :hidden; text-overflow:ellipsis; white-space:nowrap; } 

.thumbnails img{ height:111px; width:74px}

與引導，combined.min.css線

主要問題上沒有23 height:auto;

img { 
max-width: 100%; 
width: auto 9; 
height: auto; 
vertical-align: middle; 
border: 0; 
-ms-interpolation-mode: bicubic; 
}

來源

2013-04-24 06:16:38

這不正是我正在尋找！ – mandreko 2013-04-24 12:56:17

如果我得到問題是正確的，標題正在導致它。你對這樣的解決方案有什麼看法：http://jsfiddle.net/32AcT/4/

與你的解決方案的不同之處在於標題是在縮略圖（見代碼1）div內，因此在寬度上有限制（見代碼2）。這可能是因爲你必須用div的高度進行一輪比賽，但我想這將是最好的解決方案。

代碼1：

<li class="span4"> 
     <div class="thumbnail"> 
      <img src="http://cf2.imgobject.com/t/p/w500/1ZjDmPKMUtout8hR77qmK1llgls.jpg"> 
      <div class="caption"> 
       <h3>Along Came a Spider</h3> 
       <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> 
      </div> 
     </div> 
    </li>

代碼2：

.thumbnail{ 
    height:650px!important; 
}

來源

2013-04-24 07:51:37

Twitter Bootstrap Mediagrid /縮略圖和空白空間

回答

相關問題