Bootstrap 3 Navbar Collapse


202

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


Perché non sono applicabili?
PW Kad,

mi è sembrato che il codice stesso fosse stato cambiato un po '
timhc22

Non seguo abbastanza. Il codice CSS intendi? Le lezioni dovrebbero essere generalmente le stesse con alcune modifiche minori
PW Kad,

non ti preoccupare, penso che mi stavo confondendo a causa dei download personalizzati (una delle risposte che ho pubblicato un link per specificare un numero di riga specifico da modificare)
timhc22

stackoverflow.com/a/23536146/563309 - ha funzionato per me, aiuterà qualcuno ...
JenonD

Risposte:


335

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


21
Ho dovuto aggiungere .navbar-collapse.collapse.in { display: block!important; }per evitare che scomparisse. Buon lavoro, però, mi ha risparmiato ore.
Dave Forber,

2
Ottima alternativa ma ho dovuto aggiungere .navbar-collapse.collapse.in {display: block! Important; margin-top: 0px; }
Mavis,

4
Quello che mi piace di questo è che se aggiorno Bootstrap, non devo preoccuparmi di trovare la variabile e ricompilarla.
ScubaSteve

6
ma i menu a discesa erano ancora in modalità desktop, ho dovuto modificare il codice sulla riga 3934 al massimo con: 992 (in bootstrap.css), sto usando bootstrap 3.2. Nel caso qualcuno ne avesse bisogno.
chandan,

4
Questo non sembra gestire gli dropdown-menuoggetti nella barra di navigazione.
alexw,

142

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!


qual è la differenza tra le versioni predefinite di bootstrap e le versioni personalizzate? Le loro strutture di cartelle sono abbastanza diverse e la versione personalizzata ha solo i file CSS e JS, dato che la versione predefinita ha molte cartelle tra cui MENO. Sono un po 'confuso.
Rahul Patwa,

1
@RahulPatwa Se scarichi l'intero Bootstrap 3 Zip, otterrai tutti i file di sviluppo. Questi sono i file che le persone usano per continuare a sviluppare Bootstrap e includono elementi come i file di lavoro Composer e Grunt, i file di sistema git, i file LESS, ecc. I file completi si trovano nella cartella / dist. Vedrete le cartelle per /css, /js, /fonts. La personalizzazione fornisce solo i file compilati selezionati.
jmbertucci,

quindi se scarico il bootstrap completo e apporto alcune modifiche in meno variabili .. Come posso compilarlo nuovamente nel file CSS?
Rahul Patwa,

2
@RahulPatwa Esistono diversi modi per compilare MENO. Il sito Web LESS spiega come sia dal lato client che dal lato server. Crunch è una semplice GUI che puoi usare. Il sito Web di Bootstrap raccomanda specificamente di utilizzare il loro strumento RECESS . E c'è di più .
jmbertucci,

9
Il modo più semplice è semplicemente andare su getbootstrap.com/customize ridefinire il valore \ @ grid-float-breakpoint per qualcosa di hardcoded (ad esempio 520px) o per una dimensione dello schermo più piccola come \ @ screen-xs-min
neves

34

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!


2
Impostandolo su un valore molto piccolo, ad es. 1px, si disabilita il collasso della barra di navigazione (ad es. Se si desidera una barra di navigazione non reattiva).
Gregor Slavec,

Ho anche impostato questo su '@ screen-xs-min' per limitare il menu compresso a 480px. Per alcuni siti funziona bene e crea un piacevole effetto in cui puoi facilmente passare da un menu completo a uno compresso sull'iPhone modificando l'orientamento.
Chiappa,

20

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


1
Così pulito. Ottima soluzione Grazie.
Jedidiah Hurt,

10

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

soluzione CSS standard perfetta per bootstrap 3.3.6, grazie!
xxxbence

7

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.


nota che le dimensioni sono ora deprecate e tutto ciò che rimane sono le -min quelli: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;
Doug Lee,

6

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.


3

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:

inserisci qui la descrizione dell'immagine

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


Come si usa lo stilo? Usi github.com/Acquisio/bootstrap-stylus . Nell'ultimo caso dovresti fare lo stesso come sopra. Scarica gli stili bootstrap, modifica le impostazioni in stilo / variabili.styl ecc. E ricompila.
Bass Jobsen,

3

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

1

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.


0

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

0

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.