How to distribute odd number of columns evenly using Bootstrap?

Question

I have to display all the week days of the calendar (which is 7) evenly distributed in a 12 span row using bootstrap responsive css.

I have tried

<div class ="span12">
 <div class="span2"> Monday </div>
 .......
 ......
 <div class="span2"> Sunday </div>
</div>

This will go over the 12 span and wraps the last column to the next row.

Anyone knows what's the right way to do this ?

Thank you!

Answer 1

Thank you! I just increased the percentage width of the .row-fluid span2 and created it as a separate class. It worked!

.row-fluid .daySpan {
  width: 14.192978723404255%;
  *width: 14.192978723404255%;
}

Answer 2

You'll need to use your own class rather than the grid to set a custom width. I'd probably combine it with an existing bootstrap grid class to bring in its margins, etc.

Don't forget the row div, which provides negative left and right margins.

http://jsfiddle.net/2n8Cx/1 (Only works at one width range with Responsive enabled in this demo.)

.span1.spanDays {width: 86px;}

<div class="span12">
  <div class="row">
    <div class="span1 spanDays"> Monday </div>
     .......
     ......
    <div class="span1 spanDays"> Sunday </div>
  </div>
</div>

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem