Navbar fisso verso l'alto, ma non tutta larghezza

Question

Utilizzando la 2.1.1 Twitter Bootstrap, sto cercando di creare una barra di navigazione che viene fissato alla parte superiore della pagina, ma che è non larghezza:

<div class="container"> 
    <div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <a class="brand" href="#">Project name</a> 
     <div class="nav-collapse collapse"> 
      <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 
</div> 

Se rimuovo la classe barra di navigazione-fisso-top:

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

a

<div class="navbar"> 

quindi la barra di navigazione finisce per apparire come mi piacerebbe - solo 940px largamente invece che a larghezza intera - ma ovviamente non è più fissa in cima alla pagina. Come posso mantenere questa barra di navigazione fissa in cima alla pagina senza che diventi a tutta larghezza?

Answer 1

È possibile ignorare il posizionamento di Bootstrap impostandolo a fisso - utilizzare absolute se non si desidera che per scorrere con la pagina:

.navbar { 
    position: fixed !important; 
    top: 0px; 
    width: 940px; 
} 

(prendere in considerazione dandogli un ID se si pensa di utilizzare più navbars)

Answer 2

È possibile utilizzare il markup originale e semplicemente lo stile (usando il 'navbar' di classe alla larghezza di cui avete bisogno:

.navbar { 
width: 50%; 
} 

<div class="container"> 
    <div class="navbar navbar-fixed-top"> 

See tutorial qui:

http://www.webdesignforbeginners.info/bootstrap-simple-navbars/

Answer 3

Bootstrap 3+ dovrebbe essere in grado di gestire le larghezze dinamici per voi se si avvolgono il tuo barra di navigazione in un div con un class di container poi larghezze sarà dinamica a seconda dello spazio disponibile.

Dai uno sguardo allo Bootstrap css in particolare la sezione container per ulteriori dettagli.

Answer 4

È possibile creare una barra di navigazione fissa o una barra di navigazione fissata in basso senza che diventi a larghezza intera e sensibile a qualsiasi dimensione dello schermo.

Fase 1: aggiungere quelli css: (I creare una classe CSS chiamato: .navbar-fixed-width)

@media all and (min-width: 768px) { 
    .navbar-fixed-width { 
    width: 768px; 
    margin-left: auto; 
    margin-right:auto; 
} 
} 

@media all and (min-width: 992px) { 
    .navbar-fixed-width { 
    width: 992px; 
    margin-left: auto; 
    margin-right:auto; 
    } 

} 

@media all and (min-width: 1200px) { 
    .navbar-fixed-width { 
    width: 1200px; 
    margin-left: auto; 
    margin-right:auto; 
    } 
} 

fase 2: .navbar-fixed-width classe per la navigazione in questo modo.

<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     </div> 
    </div> 
</div> 

Answer 5

Meno per la soluzione Tommy Nguyen.

.navbar-fixed-width { 
    margin-left: auto; 
    margin-right: auto; 

    @media all and (min-width: @screen-sm-min) { 
    width: @screen-sm-min; 
    } 

    @media all and (min-width: @screen-md-min) { 
    width: @screen-md-min; 
    } 

    @media all and (min-width: @screen-lg-min) { 
    width: @screen-lg-min; 
    } 
}