Question

所以，我正在玩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>

然而，这有一些不期望的行为：它继续向下浮动页面顶部 - 示例here。

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

Answer 1

你的意思是顶级酒吧总是排在最前面？这是预期的行为。

您可以通过删除

来更改它

position: fixed

工具栏CSS定义中的

。

Answer 2

来自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>

Answer 3

<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>

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

3 个答案: