问题描述
在我的Twitter Bootstrap 3.2应用程序,我有div块具有宽度。
In my Twitter Bootstrap 3.2 application I have div blocks that has resposive widths.
但是如果我删除row类,由于内容长度的改变,块高度变得不同,所以块看起来很奇怪。检查此宽度是否大于992像素的屏幕:
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类,我的页面看起来不错:
但是我不知道什么时候使用行类。因为屏幕尺寸不同,所以我不知道是否可以使用行类每2个div或3个div。
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.
所以我的问题是,如何使这个块具有相同的高度,所以即使小和大的屏幕有漂亮的外观吗?
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>
编辑:同时在大屏幕中检查此行为:
即使我使用row类,一些块长一些
当我使用alert- *类时,它看起来很糟糕。
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.
Edit2:虽然我喜欢CSS解决方案,
Although I prefer CSS solutions, a JQuery based solution also ok for me.
推荐答案
我创建了这个基于javascript的解决方案。
Fiddle:
I created this javascript based solution.
Fiddle: 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
// 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);
});
}
这篇关于Twitter引导响应块高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!