如何使用Twitter Bootstrap使彼此附近的div具有相同的高度

Question

I have a page with a variable numbers of child divs, that depending on screen resolution they come 4 in a row (desktop), 3 in a row (tablet) or 2 in a row (on smartphones). But their content differ. How could I make divs that are in a line, have the same height? I have an example here

<div class="row">
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        asdfas<br />
        asdfas
    </div>
</div>

Answer 1

In this case, go for display:flex
or jquery grid layout plugins

Answer 2

You should manually set the height of the divs. Find out what height (probably in pixels) is appropriate for the largest div, and then set them all to that size.

Answer 3

Put an Id on the row class so you can use it as a selector

<div class="row" id=selectorID>

Then try add a min-height on the child divs

#selectorID > div[class^='col-']{ min-height: 200px; }