La Position de Twitter Bootstrap cadre topbar pour rester au haut de la page

Donc, je suis en train de jouer autour avec Twitter du nouveau framework CSS, Bootstrap.

Ce que j'éprouve est comme suit: j'ai ajouté le topbar div de ma page:

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

Cependant, ce qui a une certaine onu-comportement attendu: Il procède à flotteur vers le bas de la page en haut - exemple ici.

Est-il un moyen pour empêcher que cela se produise, ou dois-je envisager un cadre différent?

Je suppose que vous n'avez pas visité twitter.com dans un tout...

OriginalL'auteur jrg | 2011-08-27

  1. 17

    Vous voulez dire que la barre du haut est toujours au top? C'est le inteded comportement.

    Vous pouvez le modifier par la suppression de 

    position: fixed

    dans la topbar CSS définition.

    Je recommanderais de ne pas éditer le Twitter de la feuille de style, et de la création de votre propre feuille de style pour remplacer le twitter de styles.
    Si vous pouvez l'éviter, ne pas le modifier. Si vous ne pouvez pas, bootstrap-sass est idéal pour l'édition de certains styles tout en laissant les autres de même.

    OriginalL'auteur Pekka 웃

  2. 11

    de http://twitter.github.com/bootstrap/components.html#navbar

    Pour rendre la barre de navigation fixe en haut de la fenêtre d'affichage, ajouter .navbar-fixed-top pour l'extérieur div, .navbar. Dans votre CSS, vous aurez également besoin de tenir compte de la superposition, il provoque par l'ajout de padding-top: 40px; à votre <body>.

    <div class="navbar navbar-fixed-top">
  ...
</div>

    OriginalL'auteur Tzury Bar Yochay

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

    OriginalL'auteur João Paulo Pinheiro