Grid slightly off #2246

Closed
thenation7 opened this Issue Feb 24, 2012 · 3 comments

Projects

None yet

4 participants

@thenation7

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.

@nkryptic
Contributor

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="row">
  <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>
</div>
@meleyal
Contributor
meleyal commented Feb 24, 2012

Or you could use box-sizing: border-box on the divs

http://paulirish.com/2012/box-sizing-border-box-ftw/

@mdo
Member
mdo commented Feb 25, 2012

@nkryptic seems correct. Closing out.

@mdo mdo closed this Feb 25, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment