Geek Answers Handbook

Bootstrap 3 nested grid doesn't reset to 12

I'm a little new to Bootstrap 3, so forgive me if this seems obvious.

I created jsfiddle to get started, which I hope will help to 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 - say, from http://gridpak.com/ - they will stick to this throughout the design. If they were to create the right panel in order to be the full height of the screen, this would probably take 4 gratings. That leaves us with 8 - the good math I know.

:. 8, - , , 12- . 12- , .

: , 8- div, , 8 , - , ? , -, ?

row-fluid Bootstrap 2, - , .

, - , - .

+4
3

, push/pull , .

jsfiddle 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>

, , , , , , " ", "push", , "" .

, .

+1

, ,

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>

, / , -, .

, , , quesitons.

+1

, . , CSS ( SCSS, ), , javascript - .

: div A div B, A. , , div B - B/A * 100, . CSS ( gist ).

, divs, A B, ( ).

CSS (, SCSS), : https://gist.github.com/royalsflush/8403942
(, ).

JS, , , . demo: http://bootply.com/105852
: https://gist.github.com/royalsflush/8422780
, CSS, , . : , A B, div C, B. , B, B C B, , A B. , , .

, , , , . , !

0
source

More articles:


All Articles