Bootstrap 3 Navbar Collapse

Gibt es eine Möglichkeit, den Punkt zu erhöhen, an dem die Bootstrap 3-Navigationsleiste zusammenbricht (dh so, dass sie auf Portrait-Tablets zu einem Dropdown zusammenfällt)?

Diese beiden waren auf Bootstrap 2 anwendbar, aber nicht jetzt!

Wie ändere ich den Schwellenwert für das Zusammenbrechen der Navigationsleiste mithilfe von Twitter-Bootstrap-Responsive?

Ändern Sie den standardmäßigen reaktionsfähigen Haltepunkt der Navigationsleiste

Ich hatte heute das gleiche Problem.

Bootstrap 4

Es ist eine native Funktionalität: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Sie müssen .navbar-expand{-sm|-md|-lg|-xl}Klassen verwenden:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Ändern Sie einfach 991pxdurch 1199pxfür mdGrößen.

Demo

Der große Unterschied zwischen Bootstrap 2 und Bootstrap 3 besteht darin, dass Bootstrap 3 "Mobile First" ist.

Das bedeutet, dass die Standardstile für mobile Geräte entwickelt wurden. Bei Navbars bedeutet dies, dass sie standardmäßig "reduziert" und "erweitert" werden, wenn eine bestimmte Mindestgröße erreicht ist.

Die Website von Bootstrap 3 enthält tatsächlich einen "Hinweis", was zu tun ist: http://getbootstrap.com/components/#navbar

Passen Sie den Reduzierungspunkt an

Abhängig vom Inhalt Ihrer Navigationsleiste müssen Sie möglicherweise den Punkt ändern, an dem Ihre Navigationsleiste zwischen dem reduzierten und dem horizontalen Modus wechselt. Passen Sie die Variable @ grid-float-breakpoint an oder fügen Sie Ihre eigene Medienabfrage hinzu.

Wenn Sie Ihre WENIGER neu kompilieren möchten, finden Sie die angegebene WENIGER-Variable in der variables.lessDatei. Es ist derzeit auf "Erweitern" eingestellt, @media (min-width: 768px)was ein "kleiner Bildschirm" (dh ein Tablet) nach Bootstrap 3-Begriffen ist.

@grid-float-breakpoint: @screen-tablet;

Wenn Sie den kollabierten etwas länger halten möchten, können Sie ihn wie folgt einstellen:

@grid-float-breakpoint: @screen-desktop; (992px Haltepunkt)

oder früher erweitern

@grid-float-breakpoint: @screen-phone (480px Haltepunkt)

Wenn Sie möchten, dass es später erweitert wird und sich nicht mit dem erneuten Kompilieren von LESS befasst, müssen Sie die Stile, die bei der 768pxMedienabfrage angewendet werden, überschreiben und zum vorherigen Wert zurückkehren lassen. Fügen Sie sie dann zum richtigen Zeitpunkt erneut hinzu.

Ich bin mir nicht sicher, ob es einen besseren Weg gibt. Der beste (einfachste) Weg ist es, den Bootstrap WENIGER nach Ihren Wünschen neu zu kompilieren. Andernfalls müssen Sie alle CSS-Medienabfragen finden, die sich auf Ihre Navigationsleiste auswirken, sie auf Standardstile mit einer Breite von 768 Pixel überschreiben und sie dann mit einer höheren Mindestbreite zurücksetzen.

Das Neukompilieren des WENIGER wird all diese Magie für Sie tun, indem Sie einfach die Variable ändern. Welches ist so ziemlich der Punkt von LESS / SASS Pre-Compilern. =)

(Beachten Sie, dass ich sie alle nachgeschlagen habe. Es sind ungefähr 100 Codezeilen, was für mich ärgerlich genug ist, die Idee fallen zu lassen und Bootstrap für ein bestimmtes Projekt neu zu kompilieren und zu vermeiden, dass versehentlich etwas durcheinander gebracht wird.)

Ich hoffe das hilft!

Prost!

Am einfachsten ist es, den Bootstrap anzupassen

Variable finden:

 @grid-float-breakpoint

Mit der Einstellung @ screen-sm können Sie es Ihren Anforderungen entsprechend ändern. Ich hoffe es hilft!

Diese werden in Variablen gesteuert, ohne dass in der Quelle herumgespielt werden muss. Versuchen Sie mit Bootstrap zuerst Variablen und überschreiben Sie sie dann. dann gehe zurück und versuche es erneut mit Variablen;)

Ich habe Bootstrap-Sass mit Schienen verwendet, aber es ist das gleiche mit dem Standard WENIGER.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

das ist es! Diese Referenzseite für Variablen ist sehr praktisch: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Dank Seb33300 habe ich das zum Laufen gebracht. Ein wichtiger Teil scheint jedoch zu fehlen. Zumindest in Bootstrap Version 3.1.1.

Mein Problem war, dass die Navigationsleiste bei der richtigen Breite entsprechend zusammenfiel, aber die Menüschaltfläche nicht funktionierte. Ich konnte das Menü nicht erweitern und reduzieren.

Dies liegt daran, dass die Collapse.in-Klasse durch das in .navbar-kollaps.collapse! Das Beispiel von Seb33300 wurde unten vervollständigt:

@media (max-width: 991px) {
    .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;
    }
}

Ich wollte die Antwort von jmbertucci positiv bewerten und kommentieren, aber den Kontrollen ist mir noch nicht vertraut. Ich hatte das gleiche Problem und löste es, wie er sagte. Wenn Sie Bootstrap 3.0 verwenden, bearbeiten Sie die WENIGER Variablen in variables.less. Die ansprechenden Haltepunkte werden um Zeile 200 festgelegt:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Stellen Sie dann den Reduzierungswert für die Navigationsleiste mit der Variablen @ grid-float-breakpoint auf ungefähr Zeile 232 ein. Standardmäßig ist @ screen-tablet festgelegt . Wenn Sie möchten, können Sie einen Pixelwert verwenden, aber ich bevorzuge die Verwendung der WENIGER Variablen.

Wenn das Problem darin besteht, dass das Menü in mehrere Zeilen unterteilt ist , können Sie eine der folgenden Möglichkeiten ausprobieren:

1) Versuchen Sie, die Anzahl der Menüelemente oder deren Länge zu verringern, z. B. das Entfernen von Menüelementen oder das Kürzen der Wörter.

2) Reduzieren Sie den Abstand zwischen den Menüelementen wie folgt:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Die Standardauffüllung beträgt 15px auf beiden Seiten (links und rechts).

Wenn Sie es vorziehen, jede einzelne Seite zu wechseln, verwenden Sie:

padding-left: 7px; 
padding-right: 8px;

Diese Einstellung wirkt sich auch auf die Dropdown-Liste aus.

Dies beantwortet die Frage nicht, könnte aber anderen helfen, die sich nicht mit dem CSS herumschlagen oder WENIGER Variablen verwenden möchten. Die beiden gängigen Ansätze zur Lösung dieses Problems.

Der Nabvar wird auf kleinen Geräten zusammenbrechen. Der Punkt des Reduzierens wird durch @ grid-float-breakpoint in Variablen definiert. Standardmäßig wird dies vor 768px sein. Bei Bildschirmen unterhalb der Bildschirmbreite von 768 Pixel sieht die Navigationsleiste folgendermaßen aus:

Es ist möglich, den @ grid-float-breakpoint in variables.less zu ändern und Bootstrap neu zu kompilieren. Dabei müssen Sie auch @ screen-xs-max in navbar.less ändern. Sie müssen diesen Wert auf Ihren neuen @ grid-float-breakpoint -1 setzen. Siehe auch: https://github.com/twbs/bootstrap/pull/10465 . Dies ist erforderlich, um Navigationsleistenformulare und Dropdowns am @ grid-float-breakpoint auch auf ihre mobile Version zu ändern.

Ich bin besorgt über Wartungs- und Upgrade-Probleme nach dem Anpassen von Bootstrap. Ich kann die Anpassungsschritte heute dokumentieren und hoffe, dass die Person, die Bootstrap in drei Jahren aktualisiert, die Dokumentation findet und die Schritte erneut anwendet (die zu diesem Zeitpunkt möglicherweise funktionieren oder nicht). Ich nehme an, es kann so oder so argumentiert werden, aber ich bevorzuge es, Anpassungen in meinem Code beizubehalten.

Ich verstehe jedoch nicht ganz, wie der Ansatz von Seb33300 funktionieren kann. Mit Bootstrap 4.0.3 hat es sicherlich nicht funktioniert. Damit die Navigationsleiste bei 1200 anstelle von 768 erweitert werden kann, müssen die Regeln für beide Medienabfragen überschrieben werden, um eine Erweiterung bei 768 zu verhindern und eine Erweiterung bei 1200 zu erzwingen.

Ich habe ein längeres Menü, das im Porträtmodus auf dem iPad angezeigt wird. Im Folgenden wird das Menü bis zum Haltepunkt 1200 reduziert:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Ich habe das CSS mit meiner Installation von Bootstrap 3.0.0 gemacht, da ich mit LESS nicht so vertraut bin. Hier ist der Code, den ich meiner benutzerdefinierten CSS-Datei hinzugefügt habe (die ich nach bootstrap.css lade), mit der ich steuern konnte, dass das Menü immer wie ein Menü funktionierte accordion.
Hinweis: Ich habe mein gesamtes navbarin ein div mit der Klasse eingeschlossen sidebar, um das gewünschte Verhalten zu trennen, damit es keine Auswirkungen auf andere Navigationsleisten auf meiner Site hat, wie z. B. das Hauptmenü. Passen Sie sich Ihren Bedürfnissen an und hoffen Sie, dass dies hilfreich ist.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Zusätzlicher Hinweis: Ich habe auch das Umschalten des Hauptmenüs geändert navbar(da der obige Code auf meiner Site für ein "Untermenü" an der Seite verwendet wird.

Ich habe mich verändert:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

in:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

Und dann auch angepasst:

<div class="navbar-collapse collapse navbar-collapse">

in:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Wenn Sie nur eine haben, navbarbrauchen Sie sich darüber keine Sorgen zu machen, aber es hat mir in meinem Fall geholfen.

Und für diejenigen, die mit einer Breite von weniger als 768 Pixel zusammenklappen möchten (mit einer Breite von weniger als 768 Pixel erweitern), ist dies das erforderliche CSS:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Ich glaube, ich habe eine einfache Lösung gefunden, um den Kollaps-Haltepunkt nur durch CSS zu ändern.

Ich hoffe, andere können es bestätigen, da ich es nicht gründlich getestet habe und nicht sicher bin, ob diese Lösung Nebenwirkungen hat.

Sie müssen die Medienabfragewerte für die folgenden Klassendefinitionen ändern:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

Dies hat bei meinem aktuellen Projekt funktioniert, aber ich muss noch einige CSS-Definitionen ändern, um das Menü für alle Bildschirmgrößen richtig anzuordnen.

Hoffe das hilft.