Bootstrap 3: disabilita la compressione della barra di navigazione

88

Questa è la mia semplice barra di navigazione:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

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

Vorrei evitare di scrivere 300.000 righe di CSS per sovrascrivere gli stili predefiniti.

Qualche suggerimento?

css  twitter-bootstrap-3  navbar  collapse  preventdefault 
— sono io
fonte

Risposte:

138

Dopo un esame approfondito, non 300.000 righe 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 crollerà.

DEMO ( jsfiddle )

SPIEGAZIONE

Le quattro proprietà CSS eseguono le rispettive:

  1. La .collapseproprietà predefinita in bootstrap nasconde il lato destro del menu per tablet (orizzontale) e telefoni e invece viene visualizzato un pulsante di attivazione / disattivazione per nasconderlo / mostrarlo. Pertanto, questa proprietà sovrascrive l'impostazione predefinita e mostra in modo persistente quegli elementi.

  2. Affinché il menu di destra appaia sulla stessa riga insieme al lato sinistro, è necessario che il lato sinistro sia mobile a sinistra.

  3. Questa proprietà è presente per impostazione predefinita in bootstrap ma non su tablet (verticale) con risoluzione del telefono. Puoi saltare questo, è probabile che non influisca sulla tua barra di navigazione complessiva.

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

— AyB
fonte
2
@gwho ha appena aggiunto una spiegazione alla risposta.
— AyB
1
Se diventa abbastanza magro, gli elementi float a sinistra e float a destra possono avvolgersi l'uno sull'altro (sto parlando delle uls non delle lis). Qual è il tuo modo migliore per evitare che anche questo accada?
— ahnbizcad
2
Se il tuo unico requisito è impedire che l'elenco UL / LI diventi verticale, il secondo CSS è tutto ciò che serve.
— JamesB
1
Le !importantdichiarazioni non sono necessarie qui, per me funziona senza. Cerca di evitarli quando possibile (! Importante).
— Tim-Erwin
2
I menu a discesa @ICanHasKittenz cambiano ancora il comportamento quando <768 px, vengono visualizzati nella barra di navigazione (comportamento compresso) all'interno di apparire in una casella bianca fluttuante (comportamento non compresso) come ci si aspetterebbe. E il titolo a discesa si allarga quando si fa clic, costringendo altri elementi a spostarsi. Basta aggiungere un menu a discesa in un elemento della barra di navigazione e lo vedrai da solo.
— Roubi
24

Il nabvar collasserà su piccoli dispositivi. Il punto di collasso è definito da @grid-float-breakpointin variabili. Per impostazione predefinita, ciò avverrà prima 768px. Per gli schermi al di sotto della 768larghezza dello schermo in pixel, la barra di navigazione avrà il seguente aspetto:

inserisci qui la descrizione dell'immagine

È possibile modificare le @grid-float-breakpointvariabili in .less e ricompilare Bootstrap. Quando lo fai dovrai anche cambiare @screen-xs-maxin 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 i moduli e i menu a discesa della barra di navigazione nel punto di interruzione @ grid-float-breakpoint nella loro versione mobile.

Il modo più semplice è personalizzare bootstrap

trova variabile:

 @grid-float-breakpoint

impostato su @screen-sm, puoi modificarlo 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 del@import "bootstrap.scss";

— Gagan Gami
fonte
4
questo è davvero utile purtroppo sto usando il CDN bootstrap quindi non sono in grado di personalizzare il file principale bootstrap, qualche consiglio su come farlo in un file css separato?
— itsme
2
+1 per la variabile @ grid-float-breakpoint-variabile nella pagina di personalizzazione del bootstrap, che ha fatto il trucco per me!
— Wietse
4
Per gli utenti SASS: aggiungi le tue variabili personalizzate come $grid-float-breakpoint: 0px;prima della @import "bootstrap.scss";riga
— Duvrai
5

Ecco un approccio che lascia invariato il comportamento di compressione predefinito consentendo al tempo stesso di rimanere sempre visibile a una nuova sezione di navigazione. È un aumento di navbar; navbar-header-menuè una classe CSS che ho creato e non fa parte di Bootstrap vero e proprio.

Posizionalo navbar-headernell'elemento dopo navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

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/

Avvertenza: navbar-rightpuò essere utilizzato per ordinare gli elementi visivamente, ma non è garantito che trascini l'elemento nella parte più a destra dello schermo. Il violino dimostra quel comportamento con il navbar-form.

— Jeremy Cook
fonte
0

Se non stai utilizzando la versione inferiore, ecco la riga 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;
  }
}
— Michael Ribbons
fonte
0

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 classe .no-collapse a ciascuno degli elenchi e la classe .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
— Cristi Draghici
fonte
0

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>
Espandi lo snippet

— digout
fonte
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.