我正在使用Bootstrap。如何让三根柱子都一样高呢?

下面是问题的截图。我希望蓝色和红色的列和黄色的列一样高。

代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div>


当前回答

试着用弹性盒来做

.container { 显示:flex; padding-bottom: 50 px; } .col { 背景:蓝色; 填充:30 px; } .col。中心{ 背景:红色; 身高:100 px; margin-bottom: -50 px; } < div class = "容器" > < div class = "坳“> < / div > <div class="col center"> center </div> . < div class = "坳“> < / div > < / div >

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

其他回答

您可以使用下面的代码

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);

您可以将列包装在div中

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>

厚脸皮的jquery解决方案,如果有人感兴趣。只要确保你所有的col (el)有一个共同的类名…如果你将它绑定到$(window).resize,也可以响应

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

使用

$(document).ready(function(){
   equal_cols('.selector');
});

注意:这篇文章已经根据@Chris的评论进行了编辑,该代码只在$.each()函数中设置了最后一个最高高度

你也可以使用内联伸缩,这工作得很好,可能比用CSS修改每个行元素要干净一点。

对于我的项目,我希望每行谁的子元素有边界是相同的高度,这样边界将看起来参差不齐。为此,我创建了一个简单的css类。

.row.borders{
    display: inline-flex;
    width: 100%;
}

对于那些寻找一个快速,简单的解决方案-如果你有一个相对一致的块内容集,在div上设置一个最小高度,比最大的块大一点,可以更容易实现。

.align-box {
    min-height: 400px;
}