Cambia il punto di interruzione del crollo di navbar bootstrap senza usare meno

StackOverflow https://stackoverflow.com/questions/19827605

Domanda

Attualmente quando la larghezza del browser scende al di sotto di 768px, la barra navicamica cambia in modalità crollata. Voglio modificare questa larghezza su 1000px, quindi quando il browser è inferiore a 1000px, la barra navicari cambia in modalità crollata. Voglio farlo senza usare meno, sto usando lo stilo non meno.

Il mio problema è lo stesso di questa domanda: Bootstrap 3 Navbar Collapse

Ma tutte le risposte in quelle domande spiegano come farlo cambiando meno variabili. Non ho avuto a che fare con meno, sto usando lo stilo, quindi voglio sapere come questo può essere fatto usando lo stilo o un altro metodo.

Grazie!

È stato utile?

Soluzione 2

Devi scrivere uno specifico Query media Per questo, dalla tua domanda, al di sotto di 768px, il navbar crollerà, quindi applicalo sopra 768px e sotto 1000px, proprio così:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Ciò nasconderà il crollo della barra navalmente fino a quando il verificarsi predefinito dell'unità bootstrap. Mentre la classe di crollo ribalta le risorse interne all'interno del crollo di navbar verrà automaticamente nascosto, come saggio, devi impostare il tuo CSS come design desiderato.

Altri suggerimenti

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.

in bootstrap3, cambia questa variabile @Grid-Float-Breakpoint a quello di cui hai bisogno. Il valore predefinito è 768px

Finalmente ha elaborato come cambiare la larghezza del crollo giocherellando con "@grid-float-breakpoint" http://getbootstrap.com/customize/.

Vai alla riga 2923 in bootstrap.css (anche versione min) e cambia @media screen and (min-width: 768px) { a @media screen and (min-width: 1000px) {

Quindi il codice finirà per essere:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

L'ho appena fatto con successo utilizzando il seguente codice CSS.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Nel bootstrap 3 .less codice sorgente, c'è una variabile definita in variables.less chiamato @grid-float-breakpoint che ha il seguente commento utile:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

La corrispondenza @grid-float-breakpoint-max Il valore è impostato su quel meno 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Soluzione:

Quindi basta impostare il @grid-float-breakpoint Valutare invece 1000px e ricostruire bootstrap.less in bootstrap.css:

per esempio

@grid-float-breakpoint: 1000px;

Il modo di cambiare le variabili bootstrap è effettivamente documentato su bootstrap-sass pagina github.

Basta ridefinire le variabili prima di te @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Oltre alla risposta @skely, da fare menu a discesa All'interno del lavoro di Navbar, aggiungi anche le loro lezioni da sovrascrivere. Codice finale qui sotto:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

codice demo

I navbar possono utilizzare le classi .navbar-toggler, .navbar-collapse e .navbar-expand {-sm | -md | -lg | -xl} per cambiare quando il loro contenuto crolla dietro un pulsante. In combinazione con altre utility, puoi facilmente scegliere quando mostrare o nascondere elementi particolari.

Per le barre navicarie che non crollano mai, aggiungi la classe .navbar-espand sulla barra navicar. Per le barre di navigazione che crollano sempre, non aggiungere alcuna classe .navbar-espand.

Per esempio :

<nav class="navbar navbar-expand-lg"></nav>

Il menu mobile viene visualizzato in grande schermo.

Riferimento :https://getbootstrap.com/docs/4.0/components/navbar/

In Bootstrap V4, la navigazione può essere crollata prima o poi utilizzando diverse classi CSS

per esempio:

  • navbar-togglible-sm
  • Navbar-Togglible-MD
  • navbar-togglible-lg

Con il pulsante per la navigazione:

  • nascosto-sm-up
  • nascosto-md-up
  • nascosto-lg-up

Questo ha funzionato per me bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

Ci è voluto un po 'di tempo per capire questi due:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Per Bootstrap 3.3 questo è l'unico codice di cui hai bisogno:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

La tua scommessa migliore sarebbe quella di utilizzare una porta del processore CSS che usi.

Sono un grande fan di Sass, quindi attualmente uso https://github.com/thomas-mcdonald/bootstrap-sass

Sembra che ci sia una forchetta per stilo qui: https://github.com/acquisio/bootstrap-stylus

Altrimenti, cerca e sostituisce è il tuo migliore amico nella versione CSS ...

Ciao penso che tu possa farlo usando CSS in questo modo puoi cambiare il menu bootstrap di breakpoint 

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Questo è il codice di lavoro per me. (Anche i collegamenti a discesa Navbar Links)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }
}

Questo è ciò che mi ha fatto il trucco:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

In Bootstrap 4, se si desidera sovraccaricare quando navbar-expand-*, si espande e collassa e mostra e nasconde l'hamburger (navbar-toggler) devi trovare quello stile/definizione in bootstrap.css e ridefinirlo nel tuo Possiedi customstyle.css (o direttamente in bootstrap.css se sei così inclinato).

Per esempio. Volevo che il Navbar-Expand-LG crollasse e mostra il Navbar-Toggler a 950px. In bootstrap.css trovo:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

E sotto questo ... 

@media (min-width:992px) { 
    ... lots of styling ...
}

Ho copiato entrambe le query @media e le ho bloccate nel mio stile.css, quindi ho modificato le dimensioni per soddisfare le mie esigenze. Il mio caso volevo che crollasse a 950px. Le query di @Media devono essere diverse dimensioni (immagino), quindi ho impostato la larghezza massima del contenitore su 949.98px e ho usato il 950px per l'altra query @media e quindi il seguente codice è stato aggiunto al mio stile.css. Questo non è stato facile da districare da soluzioni contorte che ho trovato su StackOverflow e altrove. Spero che sia di aiuto.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Qui il mio codice di lavoro utilizzando in reagione con bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Ora è supportato su Bootstrap 4.4

navbar-expand-sm
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top