Twitter引导响应块高度

在我的Twitter Bootstrap 3.2应用程序中，我有div块具有重叠宽度。

但是如果我删除“行”类，由于内容长度的变化，块高度变得不同，所以块看起来很奇怪。 检查此宽度是否大于992px的屏幕： http ： //jsfiddle.net/mavent/bFcrq/13/

如果我使用“行”类，我的页面看起来不错： http ： //jsfiddle.net/mavent/bFcrq/15/但我不知道何时使用行类。 因为屏幕大小不同，所以我不知道我是否可以使用每2个div或3个div的行类。

所以我的问题是，我怎么能让这个块具有相同的高度，所以即使小而大的屏幕也有漂亮的外观？

 
Small screen is ok, There is problem for big screens 
 
 
My pretty title 1
My subtitle which can have different number of words  

编辑：还要在大屏幕中检查此行为： http ： //jsfiddle.net/bFcrq/26/
即使我使用“行”类，有些块长也有些短。
当我使用“alert- *”类时，它看起来非常糟糕。

Edit2：虽然我更喜欢CSS解决方案，但基于JQuery的解决方案也适合我。

Answer 1

我认为这是没有javascript你可以做的最好的： http ： //jsfiddle.net/V2F9E/6/

 
 
 
 
1
 
Sub
 
 
 
2
 
 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. 
 
 
 
 
3
 
Sub
 
 
 
 
4
 
 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. 
 
 
 
 
5
 
 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. 
 
 
 
6
 
Sub
 
 
 
 
  

请注意：

 
 
. 

有关网格重置的更多信息： http ： //getbootstrap.com/css/#grid-responsive-resets

编辑

您还可以查看flexbox。 也许这会帮助你，它将bootstrap与flexbox结合起来。 http://www.bootply.com/zoupRVbLG4

Answer 2

我创建了这个基于JavaScript的解决方案。
小提琴： http ： //jsfiddle.net/mavent/zobhpkvz/7/

// html

 
 
Some thing happens here.. 
Some thing happens here.. 
Some thing happens here.. 
Some thing happens here.. 
Some thing happens here.. 
 
 
Other thing happens here.. 
 
  

// 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); }); }