Aggiornamento 2018
Bootstrap 4
Modificare il punto di interruzione Navbar è più semplice in Bootstrap 4 usando il navbar-expand-*
classi:
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= menu mobile sugli schermi XS <576px
navbar-expand-md
= menu mobile sugli schermi SM <768px
navbar-expand-lg
= menu mobile su schermi MD <992px
navbar-expand-xl
= menu mobile su schermi LG <1200px
navbar-expand
= Non utilizzare mai il menu mobile
(no expand class)
= Usa sempre il menu mobile
Se escludi navbar-expand-*
Il menu mobile verrà utilizzato a all
larghezze. Ecco una demo di tutti i 6 stati della barra navalmente: Bootstrap 4 Navbar Esempio
Puoi anche usare un breakpoint personalizzato (??? px) aggiungendo un po 'di CSS. Ad esempio, ecco 1300px ..
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .dropdown-menu {
position: absolute;
}
.navbar-expand-custom .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom > .container {
flex-wrap: nowrap;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
flex-basis: auto;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Bootstrap 4 Costume Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Esempi
** Bootstrap 3 **
Per Bootstrap 3.3.x, ecco il Lavorando CSS per sovrascrivere il punto di interruzione della navigazione. Modificare 991px
alla dimensione pixel del punto in cui si desidera crollare la barra di navigazione ...
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Esempio di lavoro per 991px: http://www.booTply.com/j7xjuae5v6
Esempio di lavoro per 1200px: https://www.codeply.com/go/vsyaolzfb4 (con il modulo di ricerca)
Nota: quanto sopra funziona per qualsiasi cosa Oltre 768px. Se hai bisogno di cambiarlo in Meno di 768px il Esempio di meno di 768px è qui.