Twitter bootstrap responsive block heights
In my Twitter Bootstrap 3.2 application I have div blocks that has resposive widths.
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/
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>
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.
Edit2: Although I prefer CSS solutions, a JQuery based solution also ok for me.
I think this is the best you can do without 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
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
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
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引导响应块高度