Hey everyone, firstly thanks for updating to 2.0; bootstrap is amazing.
However, I am having a small problem with the grid system (which is more than likely my own fault and not a bug).
I am using the bootstrap.css and the non-fluid container. I have various spans, however I have 1 row that is shifted to the right slightly for some reason.
(as you can see in: http://www.afghanbasketball.com/)
The row that says "Recent Games" "Recent Forum Posts" and "Facebook"; the Facebook box is slightly off to the right.
I do not know if this is due to the usage of borders around the spans? It just doesn't make any sense to me.
Any help would be much appreciated, thanks.
It's not working because of the borders you have on those divs. The grid system only works correctly, letting you nest two span6 inside of a span12 for example, because the css is measured exactly to the pixel. When you add a border, that's at least 2px (1 on each side) that the grid system cannot account for.
Try replacing all of your border css rules to background-color, then you'll see how it fits. Doing three columns, like you're trying to do, with offsets also, doesn't play too well with the 12 columns. You might need to adjust the html to something like:
<div class="span3 offset1" id="recent-games">Recent Games</div>
<div class="span4" id="recent-posts">Recent Forum Posts</div>
<div class="span3" id="facebook">Facebook</div>
Or you could use box-sizing: border-box on the divs
@nkryptic seems correct. Closing out.