Twitter引导响应块高度
在我的Twitter Bootstrap 3.2应用程序中，我有具有resposive宽度的div块。
但是，如果我删除“行”类，由于内容长度的变化，块高度变得不同，所以块看起来很奇怪。 检查宽度大于992px的屏幕：http://jsfiddle.net/mavent/bFcrq/13/
如果我使用“行”类，我的页面看起来不错：http://jsfiddle.net/mavent/bFcrq/15/但我不知道何时使用行类。 由于屏幕大小不同，所以我不知道我是否可以使用每2格或3格的行类。
所以我的问题是，我怎样才能让这个块具有相同的高度，所以即使小屏幕和大屏幕都有漂亮的外观？
<div class="text-center"> <div class="visible-xs visible-sm">Small screen is ok, There is problem for big screens </div> <div class="well col-lg-4 col-md-4 col-sm-12 col-xs-12"> <a href=""><h2>My pretty title 1</h2><p>My subtitle which can have different number of words</p></a> </div>
编辑：同时检查大屏幕中的这种行为：http://jsfiddle.net/bFcrq/26/
即使我使用“排”类，一些块长很短。
当我使用“alert- *”类时，它看起来非常糟糕。
Edit2：尽管我更喜欢CSS解决方案，但基于JQuery的解决方案对我来说也可以。
我认为这是最好的，你可以没有JavaScript：http://jsfiddle.net/V2F9E/6/
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>1</h1>
<p>Sub</p>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>3</h1>
<p>Sub</p>
</div>
<div class="clearfix visible-lg-block "></div><!--This clearfix has to be set every 3 div because that's that col-lg break to a new line-->
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>4</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<h1>6</h1>
<p>Sub</p>
</div>
<div class="clearfix visible-md-block "></div><!--This clearfix has to be set every 2 div because that's when col-md break to a new line-->
<div class="clearfix visible-lg-block "></div><!--This clearfix has to be set every 3 div because that's that col-lg break to a new line-->
</div>
</div>
请注意：
<div class="clearfix visible-lg-block">
</div>.
有关网格重置的更多信息：http：//getbootstrap.com/css/#grid-responsive-resets
编辑
您还可以查看Flexbox。 也许这会帮助你，它将bootstrap和flexbox结合起来。 http://www.bootply.com/zoupRVbLG4
我创建了此基于JavaScript的解决方案。
小提琴：http://jsfiddle.net/mavent/zobhpkvz/7/
// html
<div class="row modify_parent">
<div class="col-sm-4 alert alert-success modify_child">Some thing happens here..
<br>Some thing happens here..
<br>Some thing happens here..
<br>Some thing happens here..
<br>Some thing happens here..
<br>
</div>
<div class="col-sm-offset-2 col-sm-4 alert alert-success modify_child">Other thing happens here..
<br>
</div>
</div>
// javascript
var sameHeightTop = $(".modify_parent");
if (sameHeightTop.length !== 0) {
sameHeightTop.each(function () {
var tallest = 0;
var sameHeightChildren = $(this).find(".modify_child");
sameHeightChildren.each(function () {
var thisHeight = $(this).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
sameHeightChildren.height(tallest);
});
}