2015-07-05 77 views
2

我想使用引导程序来获得两个分离的列(不在同一行)具有相同的高度,这将是更大的元素(图片)的高度。Bootstrap列大小

我的布局如下图所示: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> 

我基本上要包含图片是最大的图片的大小每列,以便文本可以很好地保持一致。

我不认为我可以使用不同的行/列布局(将两张图片放在同一行中),因为如果您正在调整视图的大小,它会将它们放在正确的位置(以及文本)使用移动网站。

+0

您需要将图像限制在两列该图像的特定高度将具有相同的高度,并可以给予一定的高度,既您的div。 –

+0

是的,但如果我有一个高度属性的形象,它停止响应,(因为我使用类img响应我的imgs)同样适用于div – Devolution

回答

0

像这样的东西会做的伎俩。将此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); 
}); 

不过要小心 - 缩放图像,其将大于原来的大小可能使一些颗粒感的图像。

更新 - 请检查新的小提琴。添加了一些代码以使图像保持响应。您将需要添加img响应类到您的图像。

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