如何使引导列连续具有相同的高度？答案

【问题标题】：How to make bootstrap columns the same height in a row?如何使引导列连续具有相同的高度？
【发布时间】：2015-10-26 07:52:08
【问题描述】：

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

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

【问题讨论】：

How can I make Bootstrap columns all the same height?的可能重复
我试过那个解决方案，它对我不起作用

标签： html css twitter-bootstrap

【解决方案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/

这里有一个最小的 sn-p 来说明：

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

【讨论】：

这似乎只是将一个图像的大小减小了 1x1 像素，并将另一个图像的宽度减小了 1 个像素或少量
@TheNoob 我添加了一个最小的 sn-p 来说明两个 col- 具有相同的高度，让我知道这是否适合你。
这似乎可以让列的高度相等，但我如何才能让我的图像填满整个列？还有，用xs代替lg有什么好处？
这个问题的答案取决于你想要达到的目标，有很多答案，看看这些：stackoverflow.com/questions/11757537/…，stackoverflow.com/questions/1891857/…，stackoverflow.com/questions/14142378/…
triplagent.com 最后我想要的是图像在该站点上的布局方式，并排放置，中间没有空格并延伸到页面边缘。这张截图应该有助于说明我的意思，i.imgur.com/YB7IY3P.jpg，所以右边的图像是紫色区域的大小，所以列之间没有空间，请注意实际图像要大得多，并且似乎在缩小时放入列

【解决方案2】：

只需将“equal-heights”类添加到父列

$('.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...

【讨论】：

【解决方案3】：

试着拿出你的

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

因为一个“行”意味着加起来为 12。现在，您在行中有这个 h1 以及两个 col-lg-6，它们应该在自己的一行中（6+6= 12).

h1 应该与它自己的 col-lg-12 或任何你想要的东西在它自己的行中。

【讨论】：

我已将 h1 移至新行，它似乎对 col-lg-12 中图像的高度没有影响
图像仍应在各自的 col-lg-6 中（在一行中），但 h1 应在自己的 col-lg-12 中（在另一行中）
我的错，我现在完全做到了，它仍然和以前一样

【解决方案4】：

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

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

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

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

编辑如果图像太小，您也可以将其与 min-height 结合使用

【讨论】：

当你说我可以将最大高度设置为我需要的值时，我是否在 css 中设置它，例如 .col-log-6{max-height:100%;}，然后执行我将其设置为百分比还是 px？
是的，将它设置为列，这就是我添加类height-fix 的原因，所以你只是扩展列类而不是直接编辑它，是的，使用 px 继承了一些关于它的信息css-tricks.com/almanac/properties/m/max-height
这似乎并没有改变任何东西，即使我将最大高度设置为 1px，图片仍保留在页面上不受影响
你必须将max-height设置为图片所在的列
我将最大高度设置为 .col-lg-6，这是它们所在的列，我尝试了各种高度，但它们保持不变。编辑：当我使用 style= 覆盖它时，图像消失

【解决方案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>

【讨论】：