Bootstrap Column size

Question

Я пытаюсь использовать бутстрап, чтобы получить два разделенных столбца (не в одной строке), чтобы иметь ту же высоту, которая была бы высотой большего элемента (изображения).

Мой макет показан здесь: http://jsfiddle.net/v30u5zjd/

Код:

<div class="row"> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-height"> 
       <img src="http://www.onlinegamblingbible.com/wp-content/uploads/2014/02/small-Android_logo.png"></img> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2 class="articleRecentTitre">My great title 1</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h3 class="articleRecentResume"> Excerpt here gregregfdsxgrezgttretgretregergfdqgregregregvcxgretgertrecdsgf'"t"'</h3> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-height"> 
       <img src="http://letrainde13h37.fr/wp-content/uploads/authors/jeremie-patonnier.jpg"></img> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2 class="articleRecentTitre">MY great title 2</h2> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h3 class="articleRecentResume">description xaxaxaxaxaxaxaxaxacykaxaxaxafoobarxaxaoifherzoighbnfsoidgneorihgoierhgoihrsfoighvoierhgioreghoireh</h3> 
      </div> 
     </div> 
    </div> 
</div> 

я в основном хочу каждый столбец, содержащий изображение, чтобы быть размер самого большого изображения так, чтобы текст можно выровнять красиво.

Я не думаю, что могу использовать другую раскладку строк и столбцов (поместив две фотографии в одну строку), потому что она помещала их в нужное место (вместе с текстами), если бы изменялось изображение/используя сайт на мобильном телефоне.

Answer 1

Что-то вроде этого сделало бы трюк. Добавьте этот JavaScript на свою страницу.

Обновлено скрипку: http://jsfiddle.net/v30u5zjd/2/

$(document).ready(function() { 
    var maxHeight = 0; 
    $("img").each(function() { 
     if ($(this).height() > maxHeight) { 
      maxHeight = $(this).height(); 
     } 
    }); 
    $("img").height(maxHeight); 
}); 

Будьте осторожны - масштабирование изображения, чтобы быть больше, чем их первоначальный размер может сделать для некоторых зернистость изображений.

UPDATE - вместо этого проверьте новую скрипку. Добавлен код, позволяющий образам оставаться отзывчивыми. Вам нужно будет добавить класс img-responseive к вашим изображениям.

http://jsfiddle.net/v30u5zjd/3/