如何使引导列在一行中具有相同的高度？

Question

http://www.bootply.com/somVIZEXxC#这是我的网站，基本上，我希望科尔-lg-6是相同的高度，这样我里面的图像是均匀的，目前，一个图像延伸到另一个下面。

编辑：当前版本http://www.bootply.com/UIWf6q09h4

Answer 1

试着取出你的

<h1 class="text-center"> Where do we cater to? </h1>

因为一行加起来就是12行。现在，这一行中有h1和两个col-lg-6，它们应该是自己的一行（6 6=12）。

h1应该在它自己的行与自己的col-lg-12，或任何你可能想要的。

Answer 2

只需将“等高”类添加到列父级

$('.equal-heights').each(function(){  
    var highestBox = 0;
    $(this).children('[class*="col-"]').each(function(index, el){
        if( $(el).height() > highestBox ) highestBox = $(el).height();
    });  
    $(this).children('[class*="col-"]').css('height',highestBox);
});

html将如下所示。。。

<div class="row equal-heights">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>

看到这支笔了吗...

Answer 3

内容应放在列中，并且只有列可以是行的直接子级

因此，从中取出h1。行并设置类。行均衡器高度至。行如下所示：

.row-eq-height{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<div class="row row-eq-height"></div>

这里的全部信息http://getbootstrap.com.vn/examples/equal-height-columns/

这里有一个最小的片段来说明：

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

 
<h1 class="text-center"> Where do we cater to? </h1>
   
<div class="row row-eq-height">  
  <div class="col-xs-6"> 
    <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive">
  </div>

  <div class="col-xs-6" style="background: blueviolet"> 
    <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
  </div>
</div>