Question

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?

Answer 1

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