Bootstrap 3 Navbar Collapse

Esiste un modo per aumentare il punto in cui collassa la barra di navigazione di bootstrap 3 (ovvero in modo che collassi in un menu a discesa su tablet verticali)?

Questi due erano applicabili a bootstrap 2 ma non ora!

Come modificare la soglia di collasso della barra di navigazione utilizzando Twitter bootstrap-responsive?

Modifica il punto di interruzione reattivo predefinito della barra di navigazione

Ho avuto lo stesso problema oggi.

Bootstrap 4

È una funzionalità nativa: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Devi usare le .navbar-expand{-sm|-md|-lg|-xl}classi:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Basta cambiare 991pxda 1199pxper mddimensioni.

dimostrazione

La grande differenza tra Bootstrap 2 e Bootstrap 3 è che Bootstrap 3 è "mobile first".

Ciò significa che gli stili predefiniti sono progettati per dispositivi mobili e nel caso di Navbar, ciò significa che è "compresso" per impostazione predefinita e "si espande" quando raggiunge una determinata dimensione minima.

Il sito di Bootstrap 3 ha in realtà un "suggerimento" su cosa fare: http://getbootstrap.com/components/#navbar

Personalizza il punto di collasso

A seconda del contenuto della barra di navigazione, potrebbe essere necessario modificare il punto in cui la barra di navigazione passa dalla modalità compressa a quella orizzontale. Personalizza la variabile @ grid-float-breakpoint o aggiungi la tua media query.

Se ricompilerai il tuo LESS, troverai la variabile LESS indicata nel variables.lessfile. Attualmente è impostato su "espandi" @media (min-width: 768px)che è un "piccolo schermo" (ad es. Un tablet) con termini Bootstrap 3.

@grid-float-breakpoint: @screen-tablet;

Se vuoi mantenere il collasso un po 'più a lungo, puoi regolarlo in questo modo:

@grid-float-breakpoint: @screen-desktop; (Punto di interruzione 992 px)

o espandere prima

@grid-float-breakpoint: @screen-phone (Punto di interruzione 480px)

Se vuoi che si espanda in un secondo momento e non ti occupi di ricompilare il MENO, dovrai sovrascrivere gli stili che vengono applicati al 768px media query e riportarli al valore precedente. Quindi aggiungerli nuovamente al momento opportuno.

Non sono sicuro che esista un modo migliore per farlo. Ricompilare Bootstrap MENO per le tue esigenze è il modo migliore (più semplice). Altrimenti, dovrai trovare tutte le query multimediali CSS che riguardano la tua Navbar, sovrascriverle agli stili predefiniti alla larghezza di 768px e quindi ripristinarle a una larghezza minima superiore.

Ricompilare il MENO farà tutta quella magia per te semplicemente cambiando la variabile. Questo è praticamente il punto dei pre-compilatori LESS / SASS. =)

(nota, li ho cercati tutti, sono circa 100 righe di codice, il che è abbastanza fastidioso per me abbandonare l'idea e ricompilare Bootstrap per un determinato progetto ed evitare di rovinare qualcosa per caso)

Spero che aiuti!

Saluti!

Il modo più semplice è personalizzare il bootstrap

trova variabile:

 @grid-float-breakpoint

che è impostato su @ screen-sm, è possibile modificarlo in base alle proprie esigenze. Spero che sia d'aiuto!

questi sono controllati in variabili, non c'è bisogno di confondersi nella fonte. con bootstrap, prova prima le variabili, quindi le sostituzioni. quindi tornare indietro e provare di nuovo le variabili;)

ho usato bootstrap-sass con rotaie, ma è lo stesso con il MENO predefinito.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

questo è tutto! questa pagina di riferimento delle variabili è super utile: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Grazie a Seb33300 ho funzionato. Tuttavia, sembra mancare una parte importante. Almeno in Bootstrap versione 3.1.1.

Il mio problema era che la barra di navigazione collassava di conseguenza alla larghezza corretta, ma il pulsante del menu non funzionava. Non ho potuto espandere e comprimere il menu.

Questo perché la classe collapse.in è sovrascritta dall'importante! In .navbar-collapse.collapse e può essere risolta aggiungendo anche "collapse.in". L'esempio di Seb33300 è stato completato di seguito:

@media (max-width: 991px) {
    .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-collapse.collapse.in {
        display: block!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;
    }
}

Volevo votare e commentare la risposta di jmbertucci, ma non mi devo ancora fidare dei controlli. Ho avuto lo stesso problema e l'ho risolto come ha detto. Se si utilizza Bootstrap 3.0, modificare le variabili LESS in variabili.less I punti di interruzione reattivi sono impostati intorno alla linea 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Quindi impostare il valore di compressione per la barra di navigazione utilizzando la variabile @ grid-float-breakpoint alla riga 232 circa. Per impostazione predefinita, è impostato su @ screen-tablet . Se vuoi puoi usare un valore in pixel, ma preferisco usare le variabili LESS.

Se il problema che affronti è la suddivisione del menu in più righe , puoi provare una delle seguenti:

1) Cerca di ridurre il numero di voci di menu o la loro lunghezza, come rimuovere voci di menu o abbreviare le parole.

2) Ridurre l'imbottitura tra le voci del menu, in questo modo:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Il padding predefinito è 15px su entrambi i lati (sinistro e destro).

Se preferisci cambiare ogni lato usa:

padding-left: 7px; 
padding-right: 8px;

Questa impostazione influisce anche sull'elenco a discesa.

Questo non risponde alla domanda, ma potrebbe aiutare gli altri che non vogliono fare confusione con il CSS o usare variabili MENO. I due approcci comuni per risolvere questo problema.

Il nabvar crollerà su piccoli dispositivi. Il punto di collasso è definito da @ grid-float-breakpoint in variabili. Per impostazione predefinita, ciò avverrà prima di 768 px. Per gli schermi al di sotto della larghezza dello schermo di 768 pixel, la barra di navigazione sarà simile a:

È possibile modificare @ break-float-breakpoint in variabili.less e ricompilare Bootstrap. Nel fare ciò dovrai anche cambiare @ screen-xs-max in navbar.less. Dovrai impostare questo valore sul tuo nuovo @ grid-float-breakpoint -1. Vedi anche: https://github.com/twbs/bootstrap/pull/10465 . Ciò è necessario per modificare anche i moduli e i menu a discesa della barra di navigazione nel punto di interruzione @ grid-float nella loro versione mobile.

Sono preoccupato per i problemi di manutenzione e aggiornamento lungo la strada dalla personalizzazione di Bootstrap. Posso documentare i passaggi di personalizzazione oggi e spero che la persona che aggiorna Bootstrap tra tre anni troverà la documentazione e riapplicherà i passaggi (che a quel punto potrebbero funzionare o meno). Un argomento può essere fatto in entrambi i modi, suppongo, ma preferisco mantenere qualsiasi personalizzazione nel mio codice.

Tuttavia, non capisco bene come l'approccio di Seb33300 possa funzionare. Certamente non ha funzionato con Bootstrap 4.0.3. Affinché la barra di navigazione si espanda a 1200 anziché a 768, le regole per entrambe le query multimediali devono essere ignorate per impedire l'espansione a 768 e forzare l'espansione a 1200.

Ho un menu più lungo che andrebbe a capo sull'iPad in modalità Ritratto. Quanto segue mantiene il menu compresso fino al punto di interruzione 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Ho fatto il modo CSS con la mia installazione di Bootstrap 3.0.0, dal momento che non conosco LESS. Ecco il codice che ho aggiunto al mio file css personalizzato (che carico dopo bootstrap.css) che mi ha permesso di controllare in modo che il menu funzionasse sempre come un accordion.
Nota: ho racchiuso il tutto navbarin un div con la classe sidebarper separare il comportamento che volevo in modo che non influisse su altre navbar sul mio sito, come il menu principale. Adeguati alle tue esigenze, spero sia di aiuto.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Nota aggiuntiva: ho anche aggiunto una modifica al pulsante di attivazione del menu principale navbar(poiché il codice sopra sul mio sito viene utilizzato per un "sottomenu" sul lato.

Ho cambiato:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

in:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

E poi anche regolato:

<div class="navbar-collapse collapse navbar-collapse">

in:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Se ne avrai solo uno, navbarsuppongo che non dovrai preoccuparti di questo, ma mi ha aiutato nel mio caso.

E per coloro che vogliono collassare a una larghezza inferiore a 768 px standard (espandere a una larghezza inferiore a 768 px), questo è il CSS necessario:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Penso di aver trovato una soluzione semplice per cambiare il breakpoint di collasso, solo attraverso css.

Spero che altri possano confermarlo poiché non l'ho testato a fondo e non sono sicuro che ci siano effetti collaterali in questa soluzione.

È necessario modificare i valori della media query per le seguenti definizioni di classe:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

Questo è ciò che ha funzionato per me nel mio progetto attuale, ma ho ancora bisogno di cambiare alcune definizioni CSS per organizzare il menu correttamente per tutte le dimensioni dello schermo.

Spero che questo ti aiuti.