Позиция Twitter Верхняя панель платформы Bootstrap, чтобы оставаться наверху страницы

Итак, я играю с новой платформой CSS Twitter, Bootstrap.

То, что я встречаю, выглядит следующим образом: я добавил div topbar на мою страницу:

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

Однако у этого есть некоторое ожидаемое поведение: он продолжает плавать вниз по верхней части страницы - пример здесь.

Есть ли способ предотвратить это, или мне нужно рассмотреть другую структуру?

Ответы

Ответ 1

Вы имеете в виду, что верхняя панель всегда на вершине? Таково намеренное поведение.

Вы можете изменить его, удалив

position: fixed

в определении CSS верхней панели.

Ответ 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>

Ответ 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>