Question

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">user@email.com</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>

和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;
}

当屏幕宽度足够宽以显示导航栏的所有元素时，一切正常。当宽度减小时，导航栏堆叠得很好，但是文章树和内容区域保持在固定位置，因此部分隐藏在导航栏后面。

如何才能获得内容，以便在堆叠时将内容推送到导航栏下方？我必须使用@media吗？

Answer 1

通过改造整个烂摊子来解决问题。如果有人对此感兴趣，请输入以下代码：

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">user@email.com</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;    
}

参见jsfiddle：http://jsfiddle.net/pCut6/

使用响应性更强的设计等可以做得更好但是如果他们像我一样陷入困境并且需要一个例子，那么这应该会让某人知道。

Bootstrap响应导航栏和填充到容器流体

1 个答案: