Bootstrap 3 nested grid not reset to 12 - html

Question

I'm somewhat new to Bootstrap 3 so forgive me if this seems far to obvious.
I've created a jsfiddle to start things off with which will hopefully help understand what I'm trying to ask: http://jsfiddle.net/dwdhj/2/
<div class="container">
<div class="row">
<div class="col-sm-8">
8
<div class="row">
<div class="col-sm-4">
4 - but want to appear as 6
</div>
<div class="col-sm-4">
4 - but want to appear as 6
</div>
</div>
</div>
<div class="col-sm-4">
4 - full height of screen
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
When a designer uses a grid - lets say from http://gridpak.com/ - they will stick to that throughout the whole design. If they were to create a right hand panel to be the full height of the screen it would take up perhaps 4 grids. This leaves us with 8 - good math I know.
My issue: If I create a new row inside that initial 8 - so that I can make everything in that container nice and fluid - it is essentially creating another 12 column grid. This new 12 column grid won't actually match up to the grid the designer was originally working from.
My Question: Can I make it so the grid remains the same within the initial 8 column div I used - so I can only use a maximum of 8 columns, or is there something else I should be doing here? Perhaps its something the designer needs to be doing?
I did see some examples of this with row-fluid on Bootstrap 2 but that has been done away with - for good reasons from what I've read.
Hopefully that has made enough sense - let me know if anything needs clarifying.

Answer 1

After doing some more research I found that a combination of using push/pull I was able to get the result I was after.
Review the updated jsfiddle link http://jsfiddle.net/dwdhj/3/
<div class="container">
<div class="row">
<div class="col-sm-12">
Header
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-8">
4 - full height of screen
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="col-sm-8 col-sm-pull-4">
8
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-4 col-sm-pull-4">
4
</div>
<div class="col-sm-3 col-sm-pull-4">
3
</div>
<div class="col-sm-2 col-sm-pull-4">
2
</div>
<div class="col-sm-3 col-sm-pull-4">
3
</div>
</div>
<div class="row">
<div class="col-sm-12">
Footer
</div>
</div>
</div>
Essentially my trouble was creating new rows all the time when what I needed to do was keep adding them next to each other and then when they reach the "sidebar" I add a "push" in to wrap it down to where the next "row" would have started.
Happy to be advised on a better way of doing this but it works for now.

Answer 2

I answered this back on my comments thread, essentially I took a different approach
http://jsfiddle.net/Yjn9V/1/
<div class="container">
<div class="row">
<div class="col-sm-12">Header</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-8">4 full height
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="col-sm-8 col-sm-pull-4">
<div class="row">
<div class="col-sm-12">12</div>
</div>
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
<div class="row">
<div class="col-sm-6">6</div>
<div class="col-sm-6">6</div>
</div>
<div class="row">
<div class="col-sm-5">5</div>
<div class="col-sm-2">2</div>
<div class="col-sm-5">3</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
I would try this, as you're doing way too much push/pull on things where you could just do it once on a wrapper container, as you have a very simple layout.
Check it out, let me know here or back on my comments thread if this works or if you have quesitons.

Answer 3

I had the exact same problem as you. I came up with a solution that is either implemented with pure CSS (compiled SCSS, that is), hard-coded, or javascript - I put both of them below.
The idea for is the following: you have the percentage width of a div A in terms of the container and want to know the percentage for div B, which is descendent of A. There's an easy calculation you can do to figure out the percentage of div B in terms of the container - B/A*100, if I'm not mistaken. The calculation itself is in the comment of the CSS version (link to gist is below).
Please note that, for this to work, divs that descend from A and contain B shouldn't modify the width (much like bootstrap itself).
Solution based on CSS (SCSS, to be exact), that only accepts two levels of grid:
https://gist.github.com/royalsflush/8403942
Here I just loop through the possibilities of parent and child (hence the limitation of two levels).
And a JS solution that uses the calculations I did for the first solution and a tree traversal to adjust all the nested components of the grid.
demo: http://bootply.com/105852
and source: https://gist.github.com/royalsflush/8422780
For this, I used the same idea as the CSS solution, except I use recursion on it. Let me give an example to clarify: suppose you have A and B again, and also a div C, that descends from B. If you perform the calculation I stated above for B, you will have B in terms of the container and C in terms of B, which is the exact same situation we were with A and B. Hope that is clear, not my best explanation.
Both have a demo and plenty of comments, but please let me know if you need further clarification.
Hope it helps!