Multiple intervals on the same line with Twitter Twitter

Question

Using Twitter Bootstrap utility with standard 940px mesh with flexible mesh I'm trying to get multiple .span in one .row .

I want to show a maximum of 3 .span for each inner line that grows with the page. Since more .span has been added, they are simply added to .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 am facing is that span4, which wraps on a new line, has an inherited left margin. Although I can fix this with nth-child () in modern browsers, it obviously affects IE anyway.

Any ideas how I can achieve this?

Answer 1

I decided to use the nth-child selector to remove the field on certain .span. So my final solution was like:

One span column for 320px to 979px

Two span columns for 980px to 1409px

Three column spans for 1409px and above

 @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 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 48.717948718% (so there are two lines) in css - specifically for these versions, using the html5 bolierplate.oldie html class. Then I used Modernizr and a custom test for nthchild found at https://gist.github.com/1333330 and removed the field for each even range if the browser does not support the nth-child selector.

 if (!Modernizr.nthchildn) { $('.span4:even').addClass('margless'); } 

Answer 2

Your question indicates that the columns should be automatically wrapped to the next row, but in the Boottrap .span system grid, they .span specifically designed to work in .row that grid. You do not use .row at .row in your code. So my suggestion, if you stay true to the grid, should make your code look something like this:

 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <div class="row"> <div class="span4">1</div> <div class="span4">2</div> <div class="span4">3</div> <div class="span4">4</div> <!-- wrap to a new line--> <div class="span4">5</div> </div> </div> </div> </div> 

Here is a jsfiddle that shows an OP example and the other for clarity. http://jsfiddle.net/qJ55V/5/

You must use .row (not .row-fluid ) to inherit the styles applied to each column (span). Yes, this extra markup, but not using .row , unfortunately will force your columns to .row over.

Answer 3

This is probably not the most elegant solution, but I just define a new css class in my own stylesheet, for example:

 .margless{ margin:0 !important; } 

Then I apply it to any element that I do not want to have a field. I came across the same thing using bootstrap and did not find an alternative solution.