twitter-bootstrap Twitter 引导响应块高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24745966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap responsive block heights
提问by trante
In my Twitter Bootstrap 3.2 application I have div blocks that has resposive widths.
在我的 Twitter Bootstrap 3.2 应用程序中，我有具有响应宽度的 div 块。
But if I remove "row" class, due to change of the content length, block heights become different so, blocks look weird. Check this width a screen bigger than 992px: http://jsfiddle.net/mavent/bFcrq/13/
但是如果我删除“row”类，由于内容长度的变化，块高度变得不同，所以块看起来很奇怪。检查这个宽度大于 992px 的屏幕：http: //jsfiddle.net/maven/bFcrq/13/
If I use "row" class, my page looks good: http://jsfiddle.net/mavent/bFcrq/15/But I can't know when to use row class. Because screen size differs, so I can't know whether I can use row class per 2 divs or 3 divs.
如果我使用“row”类，我的页面看起来不错：http: //jsfiddle.net/mavent/bFcrq/15/但我不知道什么时候使用 row 类。因为屏幕大小不同，所以我不知道我是否可以使用每 2 个 div 或 3 个 div 的行类。
So my question is, how can I make this blocks to have same height so even small and big screens have pretty appearance ?
所以我的问题是，我怎样才能让这些块具有相同的高度，这样即使小屏幕和大屏幕也有漂亮的外观？
<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>
Edit: Also check this behaviour in big screens: http://jsfiddle.net/bFcrq/26/
Even I use "row" class, some blocks are long some are short.
It looks very bad when I use "alert-*" classes.
编辑：还要在大屏幕上检查这种行为：http: //jsfiddle.net/bFcrq/26/
即使我使用“row”类，有些块很长有些很短。
当我使用“alert-*”类时，它看起来很糟糕。
Edit2: Although I prefer CSS solutions, a JQuery based solution also ok for me.
Edit2：虽然我更喜欢 CSS 解决方案，但基于 JQuery 的解决方案也适合我。
回答by Andrei Dvoynos
I think this is the best you can do without javascript: http://jsfiddle.net/V2F9E/6/
我认为这是没有 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>
Please notice the:
请注意：
<div class="clearfix visible-lg-block">
</div>.
More info on grid resets: http://getbootstrap.com/css/#grid-responsive-resets
有关网格重置的更多信息：http: //getbootstrap.com/css/#grid-responsive-resets
EDIT
编辑
You can also take a look at the flexbox. Maybe this will help you out, it's combining bootstrap with flexbox. http://www.bootply.com/zoupRVbLG4
您还可以查看 flexbox。也许这会对你有所帮助，它结合了 bootstrap 和 flexbox。http://www.bootply.com/zoupRVbLG4
回答by trante
I created this javascript based solution.
Fiddle: http://jsfiddle.net/mavent/zobhpkvz/7/
我创建了这个基于 javascript 的解决方案。
小提琴：http: //jsfiddle.net/maven/zobhpkvz/7/
// html
// 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
// 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);
});
}
