请参阅以下 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">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 吗？
最佳答案
通过对整个困惑进行一点修改来解决问题。如果有人对此感兴趣，这里是代码:
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/
它可以通过更具响应性的设计等做得更好，但是如果他们像我一样被卡住并需要一个例子，这应该会给他们一个想法。
关于css - Bootstrap 响应式导航栏和填充到容器流体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14705080/