Nested Bootstrap Column Sizing - html

Question

This isn't exactly a "problem" I'm trying to solve, just something I've noticed about bootstrap columns when I work with them.
It seems that bootstrap's "scaffolding" sizes "reset" somehow when I put a column inside a column.
For example:
Let's say I have a col-md-9, and I want two columns inside of it, which together span the entire width of the "parent" column.
I would have thought that I would set the width of the two columns at 4.5 (col-md-4.5), but when I do this, the two smaller columns behave as though they are nested inside a col-md-12... In other words, they fill up 3/4ths of the col-md-9, not 100%. If I give them the class of col-md-6, they will together span the whole width of their parent (col-md-9).
Here is a visual representation of what this would looks/behave like:
Again, this isn't really a 'problem' that I need solved per se, just something I was curious about because it seems to conflict with what I've read in a lot of bootstrap documentation.

Answer 1

First things first - there is no col-md-4.5 unless you've made your own custom CSS class for that. But perhaps you did something like col-md-4 and then a col-md-5 to add to a total of 9 and saw the results that you observed.
When I first started learning bootstrap I was baffled because I would do similar things with their grid system. If I had a col-md-9 then I expected that the children could never exceed 9. My elements were never positioned right. Then I learned how it really works.
Basically you can think of the children of an col-*-* as "resetting" themselves, or in other words they always will add up to 12 even if their parent is a col-xs-6 (or whatever else).
Here is a fiddle I have made.
The code for the fiddle is here:
<div class="container">
<div class="col-xs-12 red-outline">
<div class="col-xs-4 blue-outline">
col-xs-4
</div>
<div class="col-xs-5 blue-outline">
col-xs-5 for a total of 9
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
col-xs-6
</div>
<div class="col-xs-6 green-outline">
col-xs-6 for a total of 12
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
<div class="col-xs-3 black-outline">
3
</div>
<div class="col-xs-3 black-outline">
3
</div>
</div>
<div class="col-xs-6 green-outline">
<div class="col-xs-6 black-outline">
6
</div>
<div class="col-xs-6 black-outline">
6
</div>
</div>
</div>
</div>
What you can see when you run this fiddle is the red top bar represents the parent col-xs-12. In the first example, the blue add's up to 9, and doesn't take up the full width.
You can see in my second example the green add's up to 12, and does take up the full width.
Now for the third example we have some serious inception stuff going on. We have a col-xs-12 and then the two green col-xs-6's and then on the left hand side we have two col-xs-3's which add up to 6 (and as you can see, they do not take up the full width). On the right hand side we have the two col-xs-6's inside of a col-xs-6 which is inside of a col-xs-12. It's a bit of a mind bender, but just understand that you should have everything add up to 12, and not add up to whatever width the parent is.