Question

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

修改：当前版本http://www.bootply.com/UIWf6q09h4

Answer 1

内容应放在列中，并且只能列行的直接子项

所以从h1中取出.row并将.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/

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

＆＃13;

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

＆＃13;

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

＆＃13;

就像我说的，我不知道你的img的限制（身高，如果可以是背景等）这里有一些提示你想要的东西：

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

所以你可以这样做：

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

Answer 2

只需添加＆＃34; 等高＆＃34; class to parent 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>

<强> see this pen...

Answer 3

尝试取出

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

因为一个＆＃34; row＆＃34;最多可以加12个。现在，你有两个col-lg-6在行中有这个h1，它应该是它们自己的行（6 + 6 = 12）。

h1应该有自己的col-lg-12，或者你想要的任何东西。

Answer 4

您是否尝试使用max-height:？

这是你代码的一个分支http://www.bootply.com/wVSqmPKERL

在列中添加了另一行，并添加了height-fix类，只添加了

max-height属性，您可以将其设置为您需要的任何内容。

修改的如果图像很小，您也可以将其与min-height结合使用

Answer 5

这是一个带有图像的响应式网格。图像容器具有相同的高度，并且图像本身垂直居中；

.grid {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}

.grid>[class*='col-'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 15px;
}

.grid img {
  margin: auto 0;
}

@media (max-width: 767px) {
  .container {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .posts-grid>[class*='col-'] {
    padding-left: 5px;
    padding-right: 5px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

 <div class="container-fluid">
  <div class="grid">
    <div class="col-sx-6 col-md-4 col-lg-2">
      <img src="http://placehold.it/350x300" class="img-responsive">
    </div>
    <div class="col-sx-6 col-md-4 col-lg-2">
      <img src="http://placehold.it/350x450" class="img-responsive">
    </div>
  </div>
</div>

如何使bootstrap列连续高度相同？

5 个答案: