我正在使用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>


当前回答

如果你想让它在任何浏览器中工作,使用javascript:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

其他回答

之前的一些答案解释了如何使div具有相同的高度,但问题是,当宽度太窄时,div不会堆叠,因此你可以实现他们的答案与一个额外的部分。对于每一个,你可以使用这里给出的CSS名称,除了你使用的行类,所以如果你总是想让div彼此相邻,div应该是这样的:

<div class="row row-eq-height-xs">Your Content Here</div>

对于所有屏幕:

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

当你想使用sm时:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

当你想要md时:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

当你想使用lg时:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

编辑 根据评论,确实有一个更简单的解决方案,但你需要确保从所有尺寸的最大所需宽度到xs(例如<div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.row.container-height {
    overflow: hidden;
}

.row.container-height>[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

其中.container-height是必须添加到.row样式元素中的样式类,该元素的所有.col*子元素都具有相同的高度。

将这些样式仅应用于某些特定的.row(使用.container-height,如示例所示)还可以避免将边缘和填充溢出应用于所有.col*。

试着用弹性盒来做

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

我使用clearfix这个超级简单的解决方案,它没有任何副作用。

下面是AngularJS的一个例子:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

还有一个关于PHP的例子:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>
@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

例子:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

这里改编自几个答案。一旦IE8和ie9被淘汰,一旦Android 2被淘汰,基于flexbox的答案就是正确的方法。X已经死了,但在2015年并不是这样,在2016年也不会。IE8和ie9的使用率仍占4-6%,这取决于你如何衡量,对于许多企业用户来说,情况要糟糕得多。http://caniuse.com/#feat=flexbox

display: table, display: table-cell的技巧是向后兼容的,一个很棒的事情是唯一严重的兼容性问题是Safari的问题,它强制box-sizing: border-box,这已经应用到Bootstrap标签上了。http://caniuse.com/#feat=css-table

显然,您可以添加更多做类似事情的类,如.equal-height-md。我将这些标记与div绑定在一起,以便在受限制的使用中获得较小的性能收益,但您可以删除标记,使其像Bootstrap的其余部分一样更通用。

注意,这里的jsfiddle使用CSS,因此,Less将提供的内容硬编码在链接的示例中。例如@screen-sm-min已经被Less插入的- 768px所取代。