定位Twitter Bootstrap框架顶部栏以保持在页面顶部

jrg*_*jrg 13 css twitter-bootstrap

所以,我正在玩Twitter的新CSS框架Bootstrap.

我遇到的情况如下:我已将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>
Run Code Online (Sandbox Code Playgroud)

然而,这有一些不期望的行为:它继续向下浮动页面顶部 - 例如这里.

有没有办法防止这种情况发生,或者我是否需要考虑不同的框架?

Pek*_*ica 17

你的意思是顶部栏总是在顶部?这是有意的行为.

您可以通过删除来更改它

position: fixed
Run Code Online (Sandbox Code Playgroud)

在topbar的CSS定义中.

  • 我建议不要编辑Twitter样式表,并创建自己的样式表来覆盖twitter样式. (22认同)

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)