Modifica il punto di interruzione del collasso della barra di navigazione di bootstrap senza usare LESS

Attualmente, quando la larghezza del browser scende al di sotto di 768 px, la barra di navigazione passa alla modalità compressa. Voglio cambiare questa larghezza a 1000 px, quindi quando il browser è inferiore a 1000 px, la barra di navigazione passa alla modalità compressa. 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 a queste domande spiegano come farlo modificando la variabile LESS. Non ho a che fare con MENO, sto usando lo stilo, quindi voglio sapere come si può fare usando lo stilo o un altro metodo.

Grazie!

Devi scrivere una media query specifica per questo, dalla tua domanda, sotto 768px, la barra di navigazione collasserà, quindi applicala sopra 768px e sotto 1000px, proprio così:

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

Questo nasconderà il collasso della barra di navigazione fino al verificarsi predefinito dell'unità bootstrap. Man mano che la classe di collasso si ribalta, le risorse interne all'interno del collasso della barra di navigazione verranno automaticamente nascoste, come saggio devi impostare il tuo css come desideri.

AGGIORNAMENTO 2018

Bootstrap 4

La modifica del punto di interruzione della barra di navigazione è più semplice in Bootstrap 4 utilizzando le navbar-expand-*classi:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = menu mobile su schermi xs <576px
• navbar-expand-md = menu mobile su schermi sm <768px
• navbar-expand-lg = menu mobile su schermi md <992px
• navbar-expand-xl = menu mobile su schermi LG <1200 px
• navbar-expand = non usare mai il menu mobile
• (no expand class) = usa sempre il menu mobile

Se si esclude navbar-expand-*il menu mobile verrà utilizzato in alllarghezze. Ecco una demo di tutti e 6 gli stati della barra di navigazione: Bootstrap 4 Esempio di barra di navigazione

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 .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Esempi

Per Bootstrap 3.3.x, ecco il CSS funzionante per sovrascrivere il punto di interruzione della barra di navigazione. Passare 991pxalla dimensione in pixel del punto in cui si desidera comprimere 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 modulo di ricerca)

Nota: quanto sopra funziona per qualsiasi valore superiore a 768 px . Se è necessario modificarlo a meno di 768 px, l' esempio di meno di 768 px è qui .

in bootstrap3 , cambia questa variabile @ grid-float-breakpoint con quella che ti serve. Il valore predefinito è 768px

Alla fine ho scoperto come modificare la larghezza del collasso armeggiando con "@ grid-float-breakpoint" su http://getbootstrap.com/customize/ .

Vai alla riga 2923 in bootstrap.css (anche versione minima) e @media screen and (min-width: 768px) {passa 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 fatto con successo usando 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 codice sorgente Bootstrap 3 .LESS , c'è una variabile definita in variables.lesschiamata @grid-float-breakpointche ha il seguente commento utile:

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

Il @grid-float-breakpoint-maxvalore corrispondente è 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-breakpointvalore su 1000px e ricostruire bootstrap.lessin bootstrap.css:

per esempio

@grid-float-breakpoint: 1000px;

Il modo Sass di modificare le variabili bootstrap è in realtà documentato su bootstrap-sass pagina github .

Basta ridefinire le variabili prima di @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Oltre alla risposta di @Skely, per far funzionare i menu a discesa all'interno della barra di navigazione, aggiungi anche le loro classi da sostituire. Codice finale 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

In bootstrap v4, la navigazione può essere chiusa prima o poi usando diverse classi css

per esempio:

• navbar-toggleable-sm
• navbar-toggleable-md
• navbar-toggleable-lg

Con il pulsante per la navigazione:

• hidden-sm-up
• hidden-md-up
• hidden-lg-up

Per Bootstrap 3.3 questo è l'unico codice necessario:

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

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 'per capire questi due:

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

La soluzione 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 un fork per Stylus qui: https://github.com/Acquisio/bootstrap-stylus

Altrimenti, Cerca e sostituisci è il tuo migliore amico proprio nella versione css ...

Ciao, penso che puoi farlo usando CSS in questo modo, puoi cambiare il menu bootstrap 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;
    }
}

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

Per le barre di navigazione che non collassano mai, aggiungi la classe .navbar-expand sulla barra di navigazione. Per le navbar che collassano sempre, non aggiungere alcuna classe .navbar-expand.

Per esempio :

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

Il menu mobile viene visualizzato sullo schermo grande.

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

Questo è ciò che ha fatto il trucco per me:

@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 vuoi scavalcare quando navbar-expand- *, espande e collassa e mostra e nasconde l'hamburger (navbar-toggler) devi trovare quello stile / definizione in bootstrap.css e ridefinirlo nel tuo possedere customstyle.css (o direttamente in bootstrap.css se sei così propenso).

Per esempio. Volevo che navbar-expand-lg collassasse e mostra 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 quello ...

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

Ho copiato entrambe le query @media e le ho bloccate nel mio style.css, quindi ho modificato le dimensioni in base alle mie esigenze. Nel mio caso, volevo che collassasse a 950px. Le query @media devono avere dimensioni diverse (suppongo), quindi ho impostato la larghezza massima del contenitore su 949.98 px e ho usato 950 px per l'altra query @media e quindi il mio codice seguente è stato aggiunto al mio style.css. Non è stato facile districarsi dalle soluzioni contorte che ho trovato su StackOverflow e altrove. Spero che questo ti aiuti.

@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 utilizza in React 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