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

Question

http://www.bootply.com/somVIZEXxC#这里是我的网站的bootply，基本上我希望cols lg-6是相同的高度，以便我在他们里面的图像是均匀的，在那一刻，一个图像延伸到另一个下面。

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

Answer 1

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

因此，从.row中取出h1，并将类.row-eq-height设置为.row，如下所示：

.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>

​

就像我说的，我不知道你的img的限制(高度，如果可以是背景，等等)这里有一些小贴士可以帮你实现你想要的效果：

从row中删除margin，从col-中删除填充，将width: 100%添加到您的图像中，如下所示：

​

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.row-eq-height [class*="col-"]{
  padding: 0;
}
.row-eq-height img{
  width: 100%;
}

<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>

​

如果图像可以是背景，你可以定义一个特定的比例高度，你可以使用padding-top，假设4:3，即3* 100 /4= 75 = padding-top

所以你可以这样做：

​

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
.row-eq-height [class*="col-"]{
  padding: 0;
}
.img-container{  
  background-size: cover;
  padding-top: 75%; /*you can change it to obtain a desired height*/
}

<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">
    <div class="img-container" style="background-image: url(http://i.stack.imgur.com/gijdH.jpg?s=328&g=1)"></div>
  </div>

  <div class="col-xs-6">
    <div class="img-container" style="background-image: url(http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg)"></div>
  </div>
</div>

​

Answer 2

只需将"equal-heights“类添加到列parent

$('.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 class="text-center"> Where do we cater to? </h1>

因为一个“行”意味着12之和。现在，您在行中有这个h1和您的两个col-lg-6，它们应该在它们自己的行中(6+6=12)。

h1应该在它自己的行中，有它自己的col 12，或者你想要的任何东西。