Posiziona la topbar framework di Twitter Bootstrap in cima alla pagina

Quindi, sto giocando con il nuovo framework CSS di Twitter, Bootstrap.Posiziona la topbar framework di Twitter Bootstrap in cima alla pagina

Quello che sto incontrando è il seguente: ho aggiunto la topbar div alla mia pagina:

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

Tuttavia, questo ha alcuni comportamenti non-atteso: Si procede a galleggiare in basso nella pagina al top - esempio here.

C'è un modo per evitare che ciò accada, o devo considerare un quadro diverso?

fonte

2011-08-27 jrg

Immagino che non hanno visitato twitter.com in un po '... – BoltClock

Vuoi dire che la barra superiore è sempre in cima? Questo è il comportamento inteded.

si può cambiare rimuovendo

position: fixed

nella definizione CSS di topbar.

fonte

2011-08-27 11:55:34

+22

Raccomando di non modificare il foglio di stile Twitter, e creare il proprio foglio di stile per sovrascrivere gli stili di Twitter. –

Se puoi evitarlo, non modificarlo. Se non puoi, bootstrap-sass è ottimo per modificare alcuni stili mantenendo gli altri lo stesso. –

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

fonte

2011-10-30 21:08:24

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

Per rendere la barra di navigazione fissato alla parte superiore della finestra, aggiungere .navbar-fixed-top al div più esterno, .navbar. Nel tuo CSS, dovrai anche tenere conto della sovrapposizione causata aggiungendo padding-top: 40px; al numero <body>.

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

fonte

2012-02-11 00:41:49

Posiziona la topbar framework di Twitter Bootstrap in cima alla pagina

risposta

Problemi correlati