Fluid Grid System in bootstrap

Question

I'm currently reading a book about Bootstrap, Publications O'REILLY

It seems nesting a fluid grid is a little different: Since we are using percentages, each row resets the column count to 12. For example, if you were inside a Span8 , instead of two span4 elements to divide the content in half, you would use two span6 divs (see Fluid Grid System | 5 Figure 1-4).

This is the case for responsive content, as we want the content to fill 100% of the container:

<div class="row-fluid">

    <div class="span8">
        level 1 of column
        <div class="row">
            <div class="span6">
                Level 2
            </div>
            <div class="span6">
                Level 2
            </div>
        </div>
    </div>
</div>

My question is , why instead of using two span4 of span6 should we be content to fill 100% of the container?

Answer 1

Because grid span width is calculated based on the entire grid width, not the parent span of the element in question.

Imagine a scenario where you have 3 or 4 levels of nesting. width calculations would get very complex. By keeping everything relative to the grid's outer structure, both visualization and the CSS itself remain simplified.