13

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

然而，这有一些意想不到的行为：它继续在顶部示例的页面下浮动。

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

4

3 回答 3

17

你的意思是顶部栏总是在顶部？那是预期的行为。

您可以通过删除来更改它

position: fixed

在 topbar 的 CSS 定义中。

于 2011-08-27T11:55:34.857 回答
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>
于 2012-02-11T00:41:49.590 回答
-1 
<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>

于 2011-10-30T21:08:24.513 回答