Twitter Bootstrap 3 barra di navigazione-collasso - larghezza impostata al collasso

Question

io uso Twitter Bootsrap 3 con navbar-collapse: http://bootply.com/91119

Quando si riduce la larghezza della pagina, il menù si divide in due linee, e successivamente collasso. Non faccio divisioni in due righe, ma voglio fare collasso. Cosa devo fare?

Answer 1

È possibile diminuire il punto in cui la barra di navigazione crolla ..

Opzione 1

Dalla documentazione Bootstrap (http://getbootstrap.com/components/#navbar)

A seconda del contenuto della tua barra di navigazione, è potrebbe essere necessario modificare il punto in cui la barra di navigazione cambia tra modalità compressa e orizzontale. Personalizza la variabile @ grid-float-breakpoint o aggiungi la tua query multimediale.

Opzione 2

Se non si desidera una build Bootstrap personalizzato, è possibile utilizzare una media query CSS. Per esempio qui è l'impostazione del punto di rottura a 1280 pixel:

@media (max-width: 1280px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
} 

http://www.bootply.com/98488

Aggiornamento per Bootstrap 3.1

La barra di navigazione in 3.1 è cambiato, in modo che il CSS per ignorare il punto di interruzione è diverso 3.0. Questo consentirà di evitare la barra di navigazione di mostrare e poi improvvisamente crollare a 3.1 http://www.bootply.com/120604