Позиционирование изображения в нижней части бутстрапа thumbnail

Question

Я хочу иметь набор чувствительных миниатюр с помощью бутстрапа, и я обнаружил некоторые проблемы, когда один из миниатюр в ширине X имеет текст подписи одной строки, а другие тексты субтитров имеют 2 линии, поэтому я получаю разницу в высотах. Я решил это, используя некоторый jQuery, который я нашел в стеке, но теперь проблема в том, что я хочу, чтобы изображения располагались в нижней части миниатюры, поэтому, если есть другие миниатюры с двумя строками, это миниатюра с надписью oneline будет выглядеть так: 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/