CODEWITHSUNDEEP
csslesstwitter-bootstrap
jigglyT101
jigglyT101

Reputation: 984

Multiple Spans In One Row with Twitter Bootstrap

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?

Upvotes: 6

Views: 20429

Answers (3)

jonschlinkert
jonschlinkert

Reputation: 11007

Your question specifies that you want columns to automatically wrap to the next line, but in Bootstrap's grid system .spans are specifically engineered to work within a .row, that's the grid. You're not using any .rows at all in your code. So my suggestion, if you stay true to the grid, is to have 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 the OP's example and another for clarity. http://jsfiddle.net/qJ55V/5/

You have to use .row (not .row-fluid) in order to get the inherited styles applied to each column (span). Yes, it's extra markup, but not using .row will unfortunately cause your columns to jumble up.

Upvotes: 4

jigglyT101
jigglyT101

Reputation: 984

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

Upvotes: 8

RazorThin
RazorThin

Reputation: 41

Probably not the most elegant solution, but I just define a new css class in my custom stylesheet such as:

.margless{
    margin:0 !important;
}

Then I apply it to any element that I don't want to have margins. I ran into the same thing using bootstrap and couldn't find an alternative solution.

Upvotes: 3

Related Questions