在所有列中使用CSS自举的所有列中的高度相等

Question

目前我在等高列中遇到了大问题我搜索了SO并且我找到了一个解决方案。即使在应用下面的css之后，在div（row）中应用下面的css，在页脚中，当我在整个页脚中输入更多数据时，第三列中有5列，但第一列和第二列没有增加。

如果你看到上面的图片前两列，最后两个地方不是在相同的高度

.equal, .equal > div[class*='col-'] { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex:1 0 auto; 
} 

从显着的问题，只有我有拿等于类，但它是只与前两列相等但不与其他列相同:(

这里是fiddle

在此先感谢

Answer 1

使用容器这个CSS：

#container{ 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    background: skyblue; 
 
} 
 

 
#a { 
 
    padding-right: 40px; 
 
    padding-left: 40px; 
 
    background: gold; 
 
} 
 

 
#b { 
 
    padding-right: 60px; 
 
    padding-left: 60px; 
 
    background: tomato; 
 
} 
 

 
#c { 
 
    padding-right: 80px; 
 
    padding-left: 80px; 
 
    background: hotpink; 
 
}

<div id=container> 
 
<div id=a>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div><div id=b>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div><div id=c>content<br>content<br>content<br></div> 
 
</div>

Answer 2

Flexbox的是最先进的解决方案，但你可以用显示器做也：表单元格，即也适用于旧版浏览器。

.row{ 
 
    display: table; 
 
} 
 

 
.col{ 
 
    display: table-cell; 
 
    padding-left: 15px; 
 
    padding-right: 15px 
 
} 
 

 
.col:nth-child(1){ 
 
    background: red; 
 
} 
 

 
.col:nth-child(2){ 
 
    background: yellow; 
 
} 
 

 
.col:nth-child(3){ 
 
    background: green; 
 
} 
 

 
.col:nth-child(4){ 
 
    background: blue; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    Test 
 
    </div> 
 
    <div class="col"> 
 
    Test<br> 
 
    Test<br> 
 
    </div> 
 
    <div class="col"> 
 
    Test<br> 
 
    Test<br> 
 
    Test<br> 
 
    
 
    </div> 
 
    <div class="col"> 
 
    Test<br> 
 
    Test<br> 
 
    Test<br> 
 
    Test<br> 
 
    </div> 
 

 

 

 
</div>

注：仅在COL-LG- *和COL-MD-*类应用等移动应响应反正。