Bootstrap 3 - zeigt die komprimierte Navigation für alle Bildschirmgrößen an

Ich bin mit Bootstrap v3.

Habe ich die navbar-Klassen im Ort, so dass, wenn ich meine mobile Leinwand-Größe der navigation zusammenbricht und die kleinen Gitter-wie toggle-button erscheint, damit das wie erwartet funktioniert.

was ich möchte, ist für diese die Standard-Aktion für alle Bildschirmgrößen. Das heißt, auch auf einem desktop-PC würde ich gerne die navigation eingeklappt und der toggle-button sichtbar sein.

Ich habe einen Blick durch die css-und es gibt eine ganze Reihe von Sachen, die bietet die Funktion, obwohl ich nicht weiß, welche Teile zu ändern.

Habe ich versucht, zu kommentieren, die größeren Medien-Abfragen, aber es gibt eine Menge von Ihnen und es scheint ein knock-on-Effekt auf andere styling.

irgendwelche Ideen?

InformationsquelleAutor der Frage Darren | 2014-02-18

  1. 36

    Können Sie überschreiben die Standard-Bootstrap-CSS wie dieses...

        .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;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    Demo: http://www.bootply.com/114896

    Dadurch wird sichergestellt, dass der kollabierte navbar wird immer dann verwendet, durch das überschreiben der Bootstrap @media queries.

    Update: Für die Bootstrap-4, Sie brauchen nur zu entfernen, die navbar-toggleable Klasse:
    http://www.codeply.com/go/LN6szcJO53

    InformationsquelleAutor der Antwort ZimSystem

  2. 9

    Dies ist was für mich gearbeitet.

    Besuchen : http://getbootstrap.com/customize/

    Suchen : "Weniger Variablen' --> 'Media queries breakpoints'

    Ändern : @screen-lg-Wert von 1200px auf 1920px

    Suchen : "Grid-system" --> @grid-float-breakpoint

    Ändern : @screen-sm-min @screen-lg

    Scrollen zum Ende der Seite.

    Klicken Sie auf "übersetzen und Laden"

    Extrahieren und verwenden Sie diese heruntergeladenen Dateien.

    InformationsquelleAutor der Antwort TheAllSeeingI

  3. 7

    Dieser arbeitete für mich:

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

    Angenommen, wenn Sie finden, Probleme mit Knebel zu, legen Sie dann den folgenden:

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

    InformationsquelleAutor der Antwort user5093523

  4. 2

    Wollte, um Zeit zu sparen, aber es war nicht perfekt. Ich habe einige Probleme mit der neuesten bootstrap, es gibt einige unnötige code und hat overflow problem in der drop-down-Menü. Dieser code war für mich die beste Lösung:

    .navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}

    InformationsquelleAutor der Antwort Sajidur Rahman

  5. 1

    Hinzufügen 100% Wert auf @grid-float-breakpoint (Grid-system -> @grid-float-breakpoint -> 100% statt @screen-sm-min).

    InformationsquelleAutor der Antwort Raju Gurung

  6. 1

    Einfachste Möglichkeit, die ich gefunden ist, um die variable ändern.weniger Datei, und ändern Sie

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

    zu

    //Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     ( your break point );

    Nur, wenn Sie WENIGER ofc.

    InformationsquelleAutor der Antwort wilcocammeraat

Schreibe einen Kommentar