Using Twitter's Bootstrap's standard 940px fluid grid responsive grid I'm trying to get multiple .span
div's in one .row
.
I want to show a max of 3 .span
's on each internal line that grows with the page. So as more .span's are added they just get added to the .row
.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="span4">1</span>
<div class="span4">2</span>
<div class="span4">3</span>
<div class="span4">4</span> <!-- wrap to a new line-->
<div class="span4">5</span>
</div>
</div>
</div>
The problem I'm facing is that the span4 which wraps to a new line has the inherited left margin. While I can fix this with nth-child() in modern browsers, it obviously still affects IE.
Any ideas how I can achieve this?
I decided to use the nth-child selector to remove the margin on certain .span's. So my final solution looked likes this:
One column of spans for 320px to 979px
Two columns of spans for 980px to 1409px
Three columns of spans for 1409px and up
@media (min-width: 320px) and (max-width:979px) {
/* one column */
.row-fluid .span4 {width:100%}
.row-fluid .span4 {margin-left:0;}
}
@media (min-width: 980px) and (max-width:1409px) {
/* two columns, remove margin off every third span */
.row-fluid .span4 {width:48.717948718%;}
.row-fluid .span4:nth-child(2n+3) {margin-left:0;}
}
@media (min-width: 1410px) {
/* three columns, .span4's natural width. remove margin off every 4th span */
.main .span4:nth-child(3n+4) {margin-left:0;}
}
For IE7 and 8 I set the width of each span to be 48.717948718% (so two per row) in the css - specifically targeting these versions by using html5 bolierplate .oldie html class. I then used Modernizr and a custom test for nthchild found at https://gist.github.com/1333330 and removed the margin for each even span, if the browser does not support the nth-child selector.
if (!Modernizr.nthchildn) {
$('.span4:even').addClass('margless');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With