Bootstrap 3 Navbar Collapse

202

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

timhc22
quelle
Warum sind sie nicht anwendbar?
PW Kad
es sah für mich so aus, als ob der Code selbst ziemlich verändert worden wäre
timhc22
Ich folge nicht ganz. Der CSS-Code, den Sie meinen? Der Unterricht sollte im Allgemeinen derselbe sein, mit ein paar kleinen Änderungen
PW Kad
Keine Sorge, ich glaube, ich war verwirrt wegen der benutzerdefinierten Downloads (eine der Antworten, bei denen ich einen Link gepostet habe, um eine bestimmte Zeilennummer zum Bearbeiten
anzugeben
stackoverflow.com/a/23536146/563309 - arbeitete für mich, wird jemandem helfen ...
JenonD

Antworten:

335

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

Seb33300
quelle
21
Musste hinzufügen .navbar-collapse.collapse.in { display: block!important; }, um zu verhindern, dass es verschwindet. Gute Arbeit, hat mir Stunden gespart.
Dave Forber
2
Tolle Alternative, musste aber .navbar-destroy.collapse.in {display: block! Important hinzufügen; Rand oben: 0px; }
Mavis
4
Was mir daran gefällt, ist, dass ich mich beim Upgrade von Bootstrap nicht darum kümmern muss, die Variable zu finden und neu zu kompilieren.
ScubaSteve
6
Da sich die Dropdowns jedoch noch im Desktop-Modus befanden, musste ich den Code in Zeile 3934 auf max-with bearbeiten: 992 (in bootstrap.css), ich verwende Bootstrap 3.2. Nur für den Fall, dass jemand dies braucht.
Chandan
4
Dies scheint keine dropdown-menuElemente in der Navigationsleiste zu behandeln .
Alexw
142

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!

jmbertucci
quelle
Was ist der Unterschied zwischen Bootstrap-Standardversionen und benutzerdefinierten Versionen? Ihre Ordnerstrukturen sind sehr unterschiedlich und die angepasste Version enthält nur die CSS- und JS-Dateien, da die Standardversion viele Ordner enthält, einschließlich WENIGER. Ich bin etwas verwirrt.
Rahul Patwa
1
@RahulPatwa Wenn Sie die vollständige Bootstrap 3-Zip-Datei herunterladen, erhalten Sie alle Entwicklungsdateien. Dies sind die Dateien, die verwendet werden, um Bootstrap weiterzuentwickeln. Dazu gehören beispielsweise Composer- und Grunt-Arbeitsdateien, Git-Systemdateien, WENIGER-Dateien usw. Die vollständigen Dateien befinden sich im Ordner / dist. Sie werden sehen , Ordner für /css, /js, /fonts. Wenn Sie es anpassen, erhalten Sie nur die kompilierten Dateien, die Sie ausgewählt haben.
jmbertucci
Wenn ich also den vollständigen Bootstrap herunterlade und dann einige Änderungen an weniger Variablen vornehme. Wie kompiliere ich das wieder in eine CSS-Datei?
Rahul Patwa
2
@ RahulPatwa Es gibt mehrere Möglichkeiten, WENIGER zu kompilieren. Auf der WENIGER-Website wird erläutert, wie dies sowohl auf Client- als auch auf Serverseite der Fall ist. Crunch ist eine einfache Benutzeroberfläche, die Sie verwenden können. Auf der Bootstrap-Website wird ausdrücklich empfohlen, das RECESS-Tool zu verwenden . Und es gibt noch mehr .
jmbertucci
9
Der einfachste Weg ist, unter getbootstrap.com/customize den \ @ grid-float-breakpoint-Wert für etwas festcodiertes (z. B. 520px) oder für eine kleinere Bildschirmgröße wie \ @ screen-xs-min
neves
34

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!

mshahbazm
quelle
2
Wenn Sie diesen Wert auf einen sehr kleinen Wert einstellen, z. B. 1 Pixel, wird das Reduzieren der Navigationsleiste deaktiviert (z. B. wenn Sie eine nicht reagierende Navigationsleiste möchten).
Gregor Slavec
Ich habe dies auch auf '@ screen-xs-min' gesetzt, um das reduzierte Menü auf 480px zu beschränken. Bei einigen Websites funktioniert dies gut und erzeugt einen schönen Effekt, bei dem Sie durch Ändern der Ausrichtung einfach von einem vollständigen Menü zu einem reduzierten Menü auf dem iPhone wechseln können.
Chiappa
20

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

Doug Lee
quelle
1
So sauber. Tolle Lösung. Vielen Dank.
Jedidiah verletzt
10

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;
    }
}
Daniel
quelle
Präfekt Standard-CSS-Lösung für Bootstrap 3.3.6, danke!
xxxbence
7

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.

Bastardo Sucio
quelle
Beachten Sie, dass die Größen jetzt veraltet sind und nur noch folgende übrig bleiben -min: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;
Doug Lee
6

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.

PepitoSolis
quelle
3

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:

Geben Sie hier die Bildbeschreibung ein

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.

Bass Jobsen
quelle
Wie benutzt man einen Stift? Haben Sie verwenden github.com/Acquisio/bootstrap-stylus . Im letzten Fall sollten Sie dasselbe wie oben tun. Laden Sie Bootstrap-Stile herunter, ändern Sie die Einstellung in stylus / variables.styl usw. und kompilieren Sie sie neu.
Bass Jobsen
3

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; }
}
cdonner
quelle
1

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.

Markus
quelle
0

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;
}
}
Tony Day
quelle
0

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.

Cosmin
quelle