如何使Bootstrap列都具有相同的高度？

使用Bootstrap 4的解决方案4

Bootstrap 4使用Flexbox，因此不需要额外的CSS。

<div >    <div >        <div  >          some content        </div>        <div  >          catz          <img width="100" height="100" src="https://placekitten.com/100/100/">        </div>        <div  >          some more content        </div>    </div></div>

解决方案1使用负边距（不会破坏响应能力）

.row{    overflow: hidden; }[class*="col-"]{    margin-bottom: -99999px;    padding-bottom: 99999px;}

解决方案2使用表

.row {    display: table;}[class*="col-"] {    float: none;    display: table-cell;    vertical-align: top;}

使用Flex的解决方案3已于2015年8月添加。此之前发布的注释不适用于此解决方案。

.row {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display:         flex;  flex-wrap: wrap;}.row > [class*='col-'] {  display: flex;  flex-direction: column;}