css - Bootstrap 3 - 行中的列应具有相同的高度

Question

我有一个 View ，在一个彩色框中包含 4 篇文章。当屏幕足够宽时，它们需要并排显示并具有相同的高度，如下所示:

Article 1       Article 2
Article 3       Article 4

我已经尝试添加样式以便容器 - 行和列具有以下样式，但也没有结果:

.container-height{
display:table;
}

.row-height{
display:table-row;
}

.col-height{
display:table-cell;
float:none;
} 

https://plnkr.co/edit/vrlHw8tepKZ5nj4SW8EB?p=preview

Answer 1

好吧，如果您对 jquery 解决方案没问题，那么请看一下这段代码。

检查 fiddle

$(document).ready(function(e) {
    var heightNew = 0;
    $('.col-md-6 article').each(function(index, element) {
        if($(this).height() > heightNew){
            heightNew = $(this).height();
        }
        $(this).css('height', heightNew+'px');
    });
});

所以只需将其添加到标签中并使用此 css。

article{
    text-align:center;
    background-color:lightgray;
    margin:0 25px 50px 25px;
}
h1, p{
    padding:10px;
}

我所做的是，我获取了文章的最大高度并将该高度提供给其他人，这样谁就是最大的文章，所有文章的高度都将相同。希望你会喜欢我的想法。谢谢