Bootstrap 3 – disabilita il collasso della barra di navigazione

Questa è la mia semplice barra di navigazione:

 

Vorrei solo evitare che questo crolli, perché non ne ho bisogno, come fare?

Mi piacerebbe evitare di scrivere linee di CSS da 300K per sovrascrivere gli stili di default.

Qualche suggerimento?

Dopo un esame approfondito, non 300k linee ma ci sono circa 3-4 proprietà CSS che è necessario sovrascrivere:

 .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } 

E con questo il tuo menu non collasserà.

DEMO ( jsfiddle )

SPIEGAZIONE

Le quattro proprietà CSS fanno le rispettive:

  1. La proprietà default .collapse in bootstrap nasconde il lato destro del menu per tablet (orizzontale) e telefoni e invece viene visualizzato un pulsante di triggerszione / distriggerszione per nasconderli / mostrarli. Quindi questa proprietà sovrascrive il default e mostra persistentemente quegli elementi.

  2. Perché il menu di destra appaia sulla stessa riga insieme al lato sinistro, abbiamo bisogno che il lato sinistro sia flottante a sinistra.

  3. Questa proprietà è presente di default nel bootstrap ma non sul tablet (verticale) alla risoluzione del telefono. Puoi saltare questo, è probabile che non influenzi la tua barra di navigazione generale.

  4. Ciò mantiene il menu di destra a destra mentre gli elementi interni ( li ) seguiranno la proprietà 2. Quindi abbiamo il float a sinistra e il float a destra che li porta in una linea.

Il nabvar collasserà su piccoli dispositivi. Il punto di compressione è definito da @grid-float-breakpoint nelle variabili. Di default questo sarà prima di 768px . Per gli schermi al di sotto della larghezza dello schermo di 768 pixel, la barra di navigazione sarà simile a:

inserisci la descrizione dell'immagine qui

È ansible modificare @grid-float-breakpoint in variables.less e ricompilare Bootstrap. Quando lo fai 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 . Questo è necessario per modificare i moduli di navigazione e i dropdown anche su @ grid-float-breakpoint sulla loro versione mobile.

Il modo più semplice è personalizzare il bootstrap

trova variabile:

  @grid-float-breakpoint 

che è impostato su @screen-sm , puoi cambiarlo in base alle tue esigenze. Spero che sia d’aiuto!


Per gli utenti SAAS

aggiungi le tue variabili personalizzate come $grid-float-breakpoint: 0px; prima di @import "bootstrap.scss";

Ecco un approccio che lascia invariato il comportamento di collasso predefinito, consentendo al contempo una nuova sezione di navigazione di rimanere sempre visibile. È un aumento della navbar di navbar ; navbar-header-menu è una class CSS che ho creato e non fa parte di Bootstrap.

Inseriscilo navbar-header navbar-brand dopo il navbar-brand :

  

Aggiungi questo CSS:

 .navbar-header-menu { float: left; } .navbar-header-menu > .navbar-nav { float: left; margin: 0; } .navbar-header-menu > .navbar-nav > li { float: left; } .navbar-header-menu > .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } .navbar-header-menu > .navbar-nav .open .dropdown-menu { position: absolute; float: left; width: auto; margin-top: 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } .navbar-header-menu > .navbar-form { float: left; width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-header-menu > .navbar-form > .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-header-menu > .navbar-left { float: left; } .navbar-header-menu > .navbar-right { float: right !important; } .navbar-header-menu > *.navbar-right:last-child { margin-right: -15px !important; } 

Controlla il violino: http://jsfiddle.net/L2txunqo/

Caveat: navbar-right può essere usato per ordinare gli elementi visivamente ma non è garantito per tirare l’elemento nella parte più a destra dello schermo. Il violino dimostra questo comportamento con la navbar-form .

Se non stai utilizzando la versione ridotta, ecco la linea che devi modificare:

 @media (max-width: 767px) { /* Change this to 0 */ .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } 

La seguente soluzione ha funzionato per me in Bootstrap 3.3.4:

CSS:

 /*no collapse*/ .navbar-collapse.collapse.off { display: block!important; } .navbar-collapse.collapse.off ul { margin: 0; padding: 0; } .navbar-nav.no-collapse>li, .navbar-nav.no-collapse { float: left !important; } .navbar-right.no-collapse { float: right!important; } 

quindi aggiungi la class .no-collapse a ciascuno degli elenchi e la class .off al contenitore principale. Ecco un esempio scritto in giada:

 nav.navbar.navbar-default.navbar-fixed-top .container-fluid .collapse.navbar-collapse.off ul.nav.navbar-nav.no-collapse li a(href='#' class='glyph') i(class='glyphicon glyphicon-info-sign') ul.nav.navbar-nav.navbar-right.no-collapse li.dropdown a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false') | Tools span.caret ul.dropdown-menu(role='menu') li a(href='#') Tool #1 li a(href='#') | Logout 

Un altro modo è semplicemente rimuovere collapse navbar-collapse dal markup. Esempio con Bootstrap 3.3.7