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


94

Sto usando Twitter Bootstrap 2.0.1 in un progetto Rails 3.1.2, implementato con bootstrap-sass. Sto caricando sia il file che bootstrap.cssi bootstrap-responsive.cssfile, nonché bootstrap-collapse.jsJavascript.

Ho un layout fluido con una barra di navigazione simile all'esempio . Segue le istruzioni della "variazione reattiva" della barra di navigazione qui . Funziona bene: se la pagina è più stretta di circa 940px, la barra di navigazione si comprime e mostra un "pulsante" su cui posso fare clic per espandere.

Tuttavia la mia barra di navigazione sembra buona fino a circa 550px di larghezza, cioè non ha bisogno di essere compressa a meno che lo schermo non sia molto stretto.

Come faccio a dire a Bootstrap di comprimere la barra di navigazione solo se lo schermo è largo meno di 550px?

Nota che a questo punto non voglio modificare gli altri comportamenti reattivi, ad esempio impilare gli elementi invece di visualizzarli fianco a fianco.


Ottima domanda! Dalle informazioni che hai fornito nella tua domanda sono stato in grado di implementare una barra di navigazione pieghevole partendo dal nulla. Grazie!
methodMan

Risposte:


41

Stai cercando la linea 239 del bootstrap-responsive.css

@media (max-width: 979px) {...}

Dove il max-widthvalore attiva la navigazione reattiva. Modificalo a 550px o giù di lì e dovrebbe ridimensionarsi correttamente.


12
Grazie. bootstrap-responsive.cssè sepolto nella gemma bootstrap-sass. Sì, potrei modificarlo ma poi quando la gemma viene aggiornata, dovrei farlo di nuovo. C'è un modo per sovrascrivere la query @media, simile a sovrascrivere altri elementi CSS?
Mark Berry

Non riesco a pensare a un modo per ottenere l'override senza riaffermare tutte le dichiarazioni CSS.
metodo di azione

Va bene, grazie. Ho provato questo approccio, sovrascrivendo quella riga nel codice gem, e funziona, ma ottengo una spaziatura orizzontale extra nella barra di navigazione al di sotto di 767 px di larghezza, presumibilmente a causa del CSS nel @media (max-width: 767px)blocco. Sembra che dovrò eseguire un override più ampio come suggerito nella risposta di Andres Ilich.
Mark Berry

2
Come accennato nel mio commento sulla risposta di @Andres Ilich, l'aggiornamento diretto del codice sorgente sembra il minore dei due mali quando si tratta di manutenibilità, quindi per ora accetterò questa soluzione. Posso vivere con 767px come soglia minima, anche se probabilmente potrei ridurla ulteriormente creando un contenitore personalizzato per la barra di navigazione che non è stato interessato da @media (max-width: 767px). Si spera che Bootstrap (o bootstrap-sass) un giorno includerà un mezzo per utilizzare le variabili per impostare le soglie, ma penso che richiederà l' interpolazione nei selettori multimediali .
Mark Berry

1
Il CSS di override del punto di interruzione della barra di navigazione è stato modificato per Bootstrap 3: ecco un esempio funzionante per 3.1: bootply.com/120604
Zim

73

Bootstrap> 2.1 && <3

  • Usa la versione meno di bootstrap
  • Modificare la variabile @navbarCollapseWidth in variables.less
  • Ricompila.

Aggiornamento 2013: il modo più semplice

(THX a Archonic tramite commento)

Aggiornamento 2014: Bootstrap 3.1.1 e 3.2 (l'hanno persino aggiunto alla documentazione )

Se stai personalizzando o sovrascrivendo / modificando le .lessvariabili, stai cercando:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

6
Puoi visitare twitter.github.com/bootstrap/customize.html#variables e modificare la larghezza e scaricare. Nessuna compilazione necessaria.
Archonic

Link e testo dei pulsanti aggiornati: getbootstrap.com/customize/#less-variables & "Compila e scarica"
digitalextremist

Funziona anche con la gemma twitter-bootstrap-rails se metti qualcosa come @navbarCollapseWidth: 600px;boostrap_and_overrides.css.less.
sffc

Questo sembra non essere più una cosa in Bootstrap 3. :(
CodingWithSpike

E per Bootstrap 4?
Aaron Franke,

11

Puoi stabilire una nuova @mediaquery per rilasciare gli elementi della barra di navigazione come meglio credi, tutto ciò che devi fare è reimpostare la prima per adattare la tua nuova query con la larghezza di caduta desiderata. Prendi questo per esempio:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

Nel codice seguente puoi vedere come ho incluso la @mediaquery originale che gestisce il rilascio prima del 979pxsegno e la nuova query per supportare il punto di rilascio desiderato di 550px. Ho modificato la query originale direttamente dal css che risponde al bootstrap per ripristinare tutti gli stili applicati a quella specifica query per gli elementi della barra di navigazione e li ho portati alla nuova query che porta invece il punto di rilascio di cui hai bisogno. In questo modo possiamo commutare tutti gli stili dalla query originale fino alla nuova query senza perdere tempo nel foglio di stile che risponde al bootstrap, in questo modo i valori predefiniti verranno comunque applicati agli altri elementi nel tuo documento.

Ecco una breve demo con una media query impostata per essere rilasciata 550pxquando richiesto: http://jsfiddle.net/wU8MW/

Nota: ho posizionato le @mediaquery sopra modificate molto in basso sotto il frame CSS poiché il nuovo CSS modificato dovrebbe essere caricato prima del CSS reattivo.


Grazie per la tua risposta dettagliata. Sembra funzionare, sto ancora cercando di capire come. Se ti ho capito correttamente, hai (1) clonato la @media (max-width: 979px)query originale per creare la nuova @media (max-width: 550px)query. Quindi (2) hai codificato manualmente una nuova query da 979 px per sovrascrivere gli effetti della query da 979 px nel principale bootstrap-responsive.css? La sequenza di tag nel tuo CSS non sembra seguire la sequenza in bootstrap-responsive.css, quindi ho difficoltà a confrontarli per vedere cosa hai fatto.
Mark Berry

@MarkBerry Sei sulla strada giusta. La @media (max-width: 550px)query che ho scritto non segue la @media (max-width: 979px)sintassi delle query iniziali perché tutto ciò che ho fatto è stato un rapido esempio sovrascrivendola a mano tramite firebug e copia / incolla, sono diventato pigro su quello, ma il modo giusto per farlo è come hai menzionato il tuo secondo punto.
Andres Ilich

1
Questa è una chiamata difficile quando si tratta di manutenibilità. Temo che questo tipo di override esteso, pur fornendo un controllo assoluto, significherebbe un sacco di controllo manuale dopo ogni aggiornamento Bootstrap rispetto all'aggiornamento diretto di una o due righe di codice sorgente secondo il suggerimento di @Duopixel. Sto utilizzando Bootstrap in parte perché sono non un mago CSS, quindi penso che andrò con la soluzione più semplice per il momento.
Mark Berry

6

bootstrap-sass supporterà la variabile $ navbarCollapseWidth nella prossima versione (2.2.1.0). Sarai in grado di aggiornarlo per fare esattamente quello che vuoi una volta che la versione sarà disponibile!


Per favore, potresti spiegare dove hai messo questa variabile?
Andy Hayden

Prima di qualsiasi importazione Bootstrap, ad esempio@import "bootstrap";
Ashley


4

Sospetto (e spero) che questo verrà implementato presto in modo ufficiale. Nel frattempo sto solo eseguendo un semplice hack css, usando il telefono visibile sul pulsante a discesa e il tablet visibile su un secondo set di pulsanti che ho posizionato nella barra di navigazione. Quindi prima che assomigliasse a questo:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

E ora sembra:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Nota che l'ordine degli elementi è importante, altrimenti potresti avere problemi con gli elementi che entrano nella riga successiva


3

Ho creato un file SCSS separato che elenca tutti i parziali necessari al bootstrap, in questo modo posso attivare e disattivare i parziali a seconda di ciò di cui il nostro sito ha bisogno. In questo modo, sono in grado di sovrascrivere facilmente la variabile del punto di interruzione. Ecco cosa ho ottenuto:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

2

Ecco il mio codice (tutte le altre soluzioni hanno mostrato una barra di scorrimento funky quando la barra di navigazione si è abbassata, quindi ho modificato il codice in modo che non fosse così). Non ho potuto postare su altre risposte, quindi lo farò qui perché gli altri la trovino. Sto usando rails per farlo con Bootstrap 3.0.

asset / stylesheets / framework e sostituzioni incolla questo: (Regola la larghezza massima su qualsiasi valore per raggiungere il tuo obiettivo.)

@media (max-width: 2500px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

1

Bootstrap 3.x

usando MENO , puoi cambiare il valore di @screen-smallper scegliere la tua dimensione minima

esempio: @screen-small: 600px;

lo uso per passare alla modalità "tiny device" solo quando la larghezza è inferiore a 600px


Sai come farlo con SCSS?
bcackerman

scusa non lo so. pensavo che il bootstrap fosse stato sviluppato usando LESS, quindi potresti
doverlo

1

Bootstrap 3.x

usando SASS, puoi cambiare il valore di $ screen-sm per scegliere come target la tua dimensione minima

esempio: $ screen-sm: 600px;

È necessario inserire questo valore nel file application.scss prima di @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

Meno variabili iniziano con "@" semplicemente cambiandole in "$" per sovrascriverle prima dell'importazione.

Ecco l'elenco delle variabili.


Questo interrompe la funzionalità
blnc

1

Bootstrap 4.x

È un gioco da ragazzi cambiare la soglia di compressione in Bootstrap 4.x. Ci sono 6 casi:

  1. Espandi sempre, non comprimi mai (ovvero il punto di interruzione è 0 px): <nav class="navbar navbar-expand">...</nav>
  2. Il punto di interruzione è sm (576 px):<nav class="navbar navbar-expand-sm">...</nav>
  3. Il punto di interruzione è md (768px):<nav class="navbar navbar-expand-md">...</nav>
  4. Il punto di interruzione è lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
  5. Il punto di interruzione è xl (1200 px):<nav class="navbar navbar-expand-xl">.../nav>
  6. Comprimi sempre, non espandi mai (cioè il punto di interruzione è ∞px). : <nav class="navbar">...</nav>(Rimuovi semplicemente la navbar-expand-*classe. Mobile first come in Bootstrap 4.x)

Ringraziamo questo articolo di Carol Skelly che ho trovato https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a


0

Questo è un ottimo esempio di dove potresti utilizzare la versione LESS dei file CSS Bootstrap. Come fare questo è sotto.

Ancora meglio sarebbe inviarlo come richiesta pull su Github in modo che tutti possano trarne vantaggio e si spera che il tuo "codice personalizzato" faccia parte di Bootstrap in futuro.

  • Aggiungi una variabile variables.lessche specifica quando comprimere la barra di navigazione. Qualcosa di simile a:@navCollapseWidth: 979px
  • Quindi modifica responsive-navbar.less...
    • In alto cambia @media (max-width: 979px)in@media (max-width: @navCollapseWidth)
    • In fondo cambia @media (min-width: 980px)in@media (max-width: @navCollapseWidth - 1)

Ovviamente ... dovresti compilare MENO usando uno dei metodi suggeriti .


Apparentemente Bootstrap 2.0.4 ha cambiato la struttura dei file per le cose reattive. Vedi il commento dell'autore di bootstrap-sass @Thomas McDonald. Non l'ho ancora approfondito, ma potrebbe consentire una modifica più semplice della soglia anche con la versione SASS.
Mark Berry

Mi dispiace; Mi mancava completamente il commento Sass nella domanda ... Ero solo concentrato su Bootstrap in base alla categoria. Tuttavia, la struttura del file ha lo stesso aspetto di quello che stavo guardando in Bootstrap ... in ogni caso aggiornerò la mia risposta in quanto risponde alla domanda.
Jason Capriotti

Nessun problema. E sono completamente d'accordo sul fatto che la soluzione migliore sarebbe che bootstrap offrisse in modo nativo una variabile o una serie di variabili che controlla le soglie di collasso della barra di navigazione. Non ho abbastanza esperienza con CSS, LESS o SASS o con le media query per scrivere quel miglioramento;).
Mark Berry

0

Prendendo ulteriormente il trucco di Tyler aggiungendo un blocco classificato per telefono visibile e una classe per telefono nascosto a un elemento nella navigazione pieghevole principale, puoi `` estrarre '' uno o due degli elementi compressi per visualizzarli anche nella barra di navigazione del telefono.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

0

Basta annotare questo codice nel file style.css personalizzato e funzionerà

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }
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.