twitter-bootstrap Bootstrap 响应式导航栏和填充到容器流体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14705080/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap responsive navbar and padding to container-fluid
提问by kdb
See the following fiddle: http://jsfiddle.net/HXzPj/6/
请参阅以下小提琴：http: //jsfiddle.net/HXzPj/6/
HTML:
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>
And CSS:
和 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;
}
Everything works fine when the screen width is wide enough to show all elements of the navbar. When the width is reduced, then the navbar stacks nicely but the article-tree and content-area stay in their fixed position, so are partly hidden behind the navbar.
当屏幕宽度足以显示导航栏的所有元素时，一切正常。当宽度减小时，导航栏会很好地堆叠，但文章树和内容区域保持在固定位置，因此部分隐藏在导航栏后面。
How can I get it so that the content gets pushed below the navbar when it's stacking? Do I have to use @mediafor this?
我怎样才能让内容在堆叠时被推到导航栏下方？我必须为此使用@media吗？
回答by kdb
Problem solved by reworking the whole mess a bit. In case anyone is ever interested in this, here is the code:
问题通过稍微重新处理整个混乱来解决。如果有人对此感兴趣，这里是代码：
HTML
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
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;
}
See jsfiddle: http://jsfiddle.net/pCut6/
参见 jsfiddle：http: //jsfiddle.net/pCut6/
It can be done much better still with more responsive design etc but this should give someone an idea if they're stuck like me and need an example.
它可以通过更具响应性的设计等做得更好，但是如果他们像我一样被卡住并需要一个例子，这应该会给某人一个想法。
