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

I'm using Bootstrap. How can I make three columns all the same height?

Here is a screenshot of the problem - I would like the blue and red columns to be the same height as the yellow column.

Here is the code:

some content

kittenz

some more content

解决方案

Solution 1 using negative margins (doesn't break responsiveness)

.row{

overflow: hidden;

}

[class*="col-"]{

margin-bottom: -99999px;

padding-bottom: 99999px;

}

Solution 2 using table

.row {

display: table;

}

[class*="col-"] {

float: none;

display: table-cell;

vertical-align: top;

}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

.row {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

flex-wrap: wrap;

}

.row > [class*='col-'] {

display: flex;

flex-direction: column;

}