將圖像定位到引導程序縮略圖的底部

Question

我想要一組使用引導程序的響應式縮略圖，並且當X寬度中的縮略圖中的一個縮略圖具有一行的標題文本並且其他標題文本具有2線，所以我在高度上有所不同。我已經使用我在堆棧中找到的一些jQuery解決了這個問題，但現在問題是我想要圖像定位到縮略圖的底部，所以如果有其他縮略圖和2個線標題，這個帶有標題標題的縮略圖看起來像Caption>whitespace>image

下面是一個不喜歡我的網頁工作小提琴呢，但我想這就是一個例子：http://jsfiddle.net/gS864/2/

<div class="row"> 
    <div class="col-sm-3 col-xs-6 text-center"> 
     <div class="thumbnail"> 
      <caption><strong>Aire Acondicionado</strong></caption> 
      <img src="http://placehold.it/300x200" class="img-responsive" alt="Servicios"> 
     </div> 
    </div> 
    <div class="col-sm-3 col-xs-6 text-center"> 
     <div class="thumbnail"> 
      <caption><strong>Agua Caliente</strong></caption> 
      <span id="sex"></span> 
      <img src="http://placehold.it/300x200" alt="Servicios"> 
     </div> 
    </div> 
    <div class="col-sm-3 col-xs-6 text-center"> 
     <div class="thumbnail"> 
      <caption><strong>Estacionamiento Privado</strong></caption> 
      <img src="http://placehold.it/300x200" alt="Servicios"> 
     </div> 
    </div> 
</div> 

您也可以訪問我的工作頁面，所以你可以看到它直接：http://palaceh.herokuapp.com

Answer 1

與現代瀏覽器（ie11 +），你可以使用css flexbox規則。

.thumbnail { 
    display:-webkit-flex; 
    -webkit-flex-direction: column; 

    display: flex; 
    flex-direction: column; 
} 

.thumbnail .caption { 
    -webkit-flex: 1; 
    flex: 1; 
} 

這裏是小提琴：http://jsfiddle.net/gS864/4/