Twitter Bootstrap: offsetting columns?

Question

I'm looking into Bootstrap and am wondering about offsetting columns: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

The documentation says that the columns "should always add up to 12 for each row." Then it gives an example of offsetting columns:

<div class="row">
  <div class="span4">...</div>
  <div class="span3 offset2">...</div>
</div>

Questions:

1. The columns do not add up to 12. It only totals 7. Or if you count the offset: 9. Was this just a bad example or something?
2. Why would I want to offset anything? Is this just to handle the content of the layout of my site better?

Answer 1

To clarify what Rob is saying, what you are missing is that all of the grid examples are using 9 columns. The reason is that the sidebar (side navigation) in the docs is itself taking up 3 columns.

The entire width of the bootstrap documentation is 12 columns, minus 3 for the side navigation, which leaves 9 columns for the grid demo. Make sense?

Answer 2

The sidebar is a span3. So the entire page width adds up to 12. The content section it's displayed in is only a span9.