twitter-bootstrap 将 Twitter Bootstrap 框架顶栏放置在页面顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7214334/
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
Position Twitter Bootstrap framework topbar to stay at top of page
提问by jrg
So, I'm playing around with Twitter's new CSS framework, Bootstrap.
所以，我正在尝试使用 Twitter 的新 CSS 框架Bootstrap。
What I'm encountering is as follows: I've added the topbardiv to my page:
我遇到的情况如下：我已将topbardiv添加到我的页面：
<div class="topbar">
<div class="fill">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="menu">
<a href="#" class="menu">Dropdown</a>
<ul class="menu-dropdown">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
However, this has some un-expected behavior: It proceeds to float down the page at the top - example here.
然而，这有一些意想不到的行为：它继续在页面顶部向下浮动 - 示例here。
Is there a way to prevent that from happening, or do I need to consider a different framework?
有没有办法防止这种情况发生，或者我是否需要考虑不同的框架？
回答by Pekka
You mean the top bar is always to the top? That is the inteded behaviour.
你的意思是顶部栏总是在顶部？这就是有意的行为。
You can change it by removing
您可以通过删除来更改它
position: fixed
in topbar's CSS definition.
在 topbar 的 CSS 定义中。
回答by Tzury Bar Yochay
from http://twitter.github.com/bootstrap/components.html#navbar
来自http://twitter.github.com/bootstrap/components.html#navbar
To make the navbar fixed to the top of the viewport, add .navbar-fixed-topto the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px;to your <body>.
要使导航栏固定在视口的顶部，请添加.navbar-fixed-top到最外面的 div，.navbar。在您的 CSS 中，您还需要通过添加padding-top: 40px;到您的<body>.
<div class="navbar navbar-fixed-top">
...
</div>
回答by Jo?o Paulo Pinheiro
<div class="topbar">
<div class="fill">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="menu">
<li class="dropdown" data-dropdown="dropdown" >
<a href="#" class="menu">Dropdown</a>
<ul class="menu-dropdown">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
