Bootstrap-responsive navbar und Polsterung an container-fluid

Finden Sie in der folgenden fiddle: http://jsfiddle.net/HXzPj/6/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
    </head>
    <body>
        <div class="navbar" style="position:absolute; top:0; width:100%;">
            <div class="navbar-inner"> <a href="#" class="brand">KB</a>

                <ul class="nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a href="#">Create page</a>

                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li>
                        <p class="navbar-text">[email protected]</p>
                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Upload</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Manage</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Password</a>

                    </li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Sign Out</a>

                    </li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row-fluid columns">
                <div class="span2 article-tree">Article-tree</div>
                <div class="span10 content-area">Content-area</div>
            </div>
            <div class="footer">footer</div>
        </div>
    </body>

</html>

Und CSS:

 html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding-top: 62px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.columns {
    background-color: #C9E6FF;
    height: 100%;
}
.content-area, .article-tree {
    background: #bada55;
    height: 100%;
}
.footer {
    background: red;
    height: 20px;
}

Funktioniert alles wunderbar, wenn der Bildschirm breit ist breit genug, um alle Elemente der Navigationsleiste. Wenn die Breite verringert wird, dann wird die navbar stacks gut, aber die Artikel-Baum-und content-Bereich bleiben in Ihrer position fixiert, so sind teilweise versteckt hinter der navbar.

Wie bekomme ich es so, dass der Inhalt gedrängt unter die navbar, wenn Sie sich stapeln? Muss ich @media für diese?

InformationsquelleAutor kdb | 2013-02-05
  1. 1

    Problem gelöst durch Nacharbeit das ganze Durcheinander ein bisschen. Falls es jemanden überhaupt interessiert, hier ist der code:

    HTML

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-inner"> <a href="#" class="brand">KB</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Create page</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><p class="navbar-text">[email protected]</p></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Upload</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Manage</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Password</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </div>
        </div>

        <div class="container-fluid container-height">
            <div class="row-fluid full-height">
                <div class="span2 article-tree">Article-tree</div>
                <div class="span10 content-area full-height"><div id='paragraphs' data-lorem='5'></div></div>
            </div>

        </div>
        <div class="container-fluid footer">
            <div class="footer">footer</div>        
        </div>
    </body>

</html>

    CSS

    html, body {
    height: 100%;
}
.full-height {
    height: 100%;
}
.content-area {
    background: green;
    color: white;
}

.article-tree {
    background: blue;
    color: white;
}
.footer {
    background: red;
}

.container-height {
    margin: 0 auto;
    min-height: 88%;
    height: auto;    
}

    Siehe jsfiddle: http://jsfiddle.net/pCut6/

    Es kann gemacht werden viel besser mit noch mehr responsive design, etc, aber dies sollte jemandem eine Idee, wenn Sie stecken wie ich und brauchen ein Beispiel.

    InformationsquelleAutor kdb
Schreibe einen Kommentar