jrg*_*jrg 13 css twitter-bootstrap
所以,我正在玩Twitter的新CSS框架Bootstrap.
我遇到的情况如下:我已将topbar
div 添加到我的页面:
<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>
Run Code Online (Sandbox Code Playgroud)
然而,这有一些不期望的行为:它继续向下浮动页面顶部 - 例如这里.
有没有办法防止这种情况发生,或者我是否需要考虑不同的框架?
Pek*_*ica 17
你的意思是顶部栏总是在顶部?这是有意的行为.
您可以通过删除来更改它
position: fixed
Run Code Online (Sandbox Code Playgroud)
在topbar的CSS定义中.
Tzu*_*hay 11
来自http://twitter.github.com/bootstrap/components.html#navbar
要将导航栏固定到视口的顶部,请添加.navbar-fixed-top
到最外面的div .navbar
.在您的CSS中,您还需要通过添加padding-top: 40px;
到您的帐户来解释它导致的重叠<body>
.
<div class="navbar navbar-fixed-top">
...
</div>
Run Code Online (Sandbox Code Playgroud)