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

Question

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

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

Answer 1

Content should be placed within columns, and only columns may be immediate children of rows

所以从 .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-的padding，添加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>