wake-up-neo.com

Bootstrap 3 Navbar Collapse

Gibt es eine Möglichkeit, den Punkt zu erhöhen, an dem die Navigationsleiste bootstrap 3 zusammenfällt (d. H. So, dass sie auf Hochformat-Tablets zu einem Dropdown zusammenfällt)?

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

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

Ändern Sie den standardmäßigen Haltepunkt der ansprechenden Navigationsleiste

199
timhc22

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 991px durch 1199px für md Größen.

Demo

333
Seb33300

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

Das bedeutet, dass die Standardstile für Mobilgeräte entwickelt wurden und im Fall von Navigationsleisten bedeutet dies, dass sie standardmäßig "reduziert" und "erweitert" werden, wenn sie eine bestimmte Mindestgröße erreichen.

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

Passen Sie den Einklapppunkt 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 LESS erneut kompilieren möchten, finden Sie die notierte Variable LESS in der Datei variables.less. Derzeit ist festgelegt, dass @media (min-width: 768px), bei dem es sich um einen "kleinen Bildschirm" (dh ein Tablet) handelt, nach Bootstrap 3 Begriffen "erweitert" wird.

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

Wenn Sie das zusammengeklappte Bild länger behalten möchten, können Sie es wie folgt anpassen:

@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 nicht das WENIGER neu kompiliert wird, müssen Sie die Stile, die bei der Medienabfrage 768px angewendet werden, überschreiben und auf den vorherigen Wert zurücksetzen. Fügen Sie sie dann zum richtigen Zeitpunkt erneut hinzu.

Ich bin mir nicht sicher, ob es einen besseren Weg gibt. Das Neukompilieren von Bootstrap WENIGER an Ihre Anforderungen ist der beste (einfachste) Weg. Andernfalls müssen Sie alle CSS-Medienabfragen finden, die sich auf Ihre Navbar auswirken, sie mit Standardstilen mit einer Breite von 768px überschreiben und sie dann mit einer höheren minimalen Breite zurücksetzen.

Durch das erneute Kompilieren von LESS wird all diese Magie für Sie ausgeführt, indem Sie nur die Variable ändern. Worum es bei LESS/SASS-Pre-Compilern eigentlich geht. =)

(Anmerkung, ich habe sie alle nachgeschlagen, es sind ungefähr 100 Codezeilen, was ärgerlich genug ist, um die Idee fallen zu lassen und Bootstrap für a neu zu kompilieren gegebenes Projekt und vermeiden, versehentlich etwas durcheinander zu bringen)

Ich hoffe das hilft!

Prost!

142
jmbertucci

Am einfachsten ist es, den Bootstrap anzupassen

variable finden:

 @grid-float-breakpoint

die auf @ screen-sm eingestellt ist, können Sie es nach Ihren Bedürfnissen ändern. Ich hoffe es hilft!

34
mshahbazm

diese werden in Variablen gesteuert und müssen nicht in der Quelle herumgespielt werden. Probieren Sie mit dem Bootstrap zuerst die Variablen aus und überschreiben Sie sie dann. dann gehe zurück und versuche es erneut mit Variablen;)

ich habe Bootstrap-Sass mit Rails verwendet, aber es ist das gleiche mit der Standardeinstellung 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 Variablen-Referenzseite ist sehr praktisch: https://github.com/twbs/bootstrap/blob/master/less/variables.less

20
Doug Lee

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 in der richtigen Breite entsprechend zusammengebrochen ist, aber die Menüschaltfläche nicht funktioniert hat. Ich konnte das Menü nicht erweitern und reduzieren.

Dies liegt daran, dass die collapse.in-Klasse durch die! Important-Anweisung in .navbar-collapse.collapse überschrieben wird und durch Hinzufügen der "collapse.in" behoben werden kann. Beispiel für Seb33300:

@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;
    }
}
9
Daniel

Ich wollte jmbertuccis Antwort positiv bewerten und kommentieren, aber ich bin noch nicht mit den Kontrollen vertraut. Ich hatte das gleiche Problem und löste es, wie er sagte. Wenn Sie Bootstrap 3.0 verwenden, bearbeiten Sie die LESS-Variablen in variables.less. Die reaktionsfähigen Haltepunkte werden um die Linie 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 Ausblendwert für die Navigationsleiste mit der Taste ein @ grid-float-breakpoint Variable in etwa Zeile 232. Standardmäßig ist es auf festgelegt @ screen-tablet . Wenn Sie möchten, können Sie einen Pixelwert verwenden, aber ich bevorzuge die LESS-Variablen.

7
Bastardo Sucio

Wenn das Problem, dem Sie gegenüberstehen, das Menü, das in mehrere Zeilen unterteilt ist ist, können Sie Folgendes versuchen:

1) Versuchen Sie, die Anzahl der Menüpunkte oder deren Länge zu verringern, z. B. Menüpunkte zu entfernen oder Wörter zu verkürzen.

2) Verringern 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 */
}

Der Standardabstand beträgt 15px auf beiden Seiten (links und rechts).

Wenn Sie es vorziehen, jede einzelne Seitennutzung zu ändern:

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 nicht mit dem CSS herumspielen oder WENIGER Variablen verwenden möchten. Die beiden gängigen Ansätze zur Lösung dieses Problems.

6
PepitoSolis

Ich mache mir Sorgen über Wartungs- und Upgrade-Probleme, wenn ich später Bootstrap anpasse. Ich kann die Anpassungsschritte heute dokumentieren und hoffe, dass die Person, die in drei Jahren ein Upgrade von Bootstrap durchführt, die Dokumentation findet und die Schritte erneut anwendet (die zu diesem Zeitpunkt möglicherweise funktionieren oder nicht). Ich nehme an, ein Argument kann auf beide Arten vorgebracht werden, aber ich bevorzuge es, Anpassungen in meinem Code zu behalten.

Ich verstehe allerdings nicht ganz, wie der Ansatz von Seb33300 funktionieren kann. Mit Bootstrap 4.0.3 hat es sicher nicht geklappt. Damit die Navigationsleiste um 1200 statt um 768 erweitert wird, müssen die Regeln für beide Medienabfragen außer Kraft gesetzt werden, um das Erweitern um 768 zu verhindern und das Erweitern um 1200 zu erzwingen.

Ich habe ein längeres Menü, das sich im Hochformat auf das iPad wickeln würde. Mit dem folgenden Befehl wird das Menü bis zum Haltepunkt 1200 minimiert:

@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; }
}
3
cdonner

Die Nabvar wird auf kleinen Geräten zusammenbrechen. Der Kollabierungspunkt wird durch @ grid-float-breakpoint in Variablen definiert. Standardmäßig wird dies vor 768px. Für Bildschirme unterhalb der Bildschirmbreite von 768 Pixel sieht die Navigationsleiste folgendermaßen aus:

enter image description here

Es ist möglich, den @ grid-float-breakpoint in variables.less zu ändern und Bootstrap neu zu kompilieren. In diesem Fall 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 die Navigationsleistenformulare und Dropdowns am @ grid-float-breakpoint auf ihre mobile Version umzustellen.

3
Bass Jobsen

Ich habe die CSS-Methode mit meiner Installation von Bootstrap 3.0.0 angewendet, da ich mit LESS nicht so vertraut bin. Hier ist der Code, den ich zu meiner benutzerdefinierten CSS-Datei hinzugefügt habe (die ich nach bootstrap.css lade), wodurch ich steuern konnte, dass das Menü immer wie ein accordion funktionierte.
Anmerkung: Ich habe mein gesamtes navbar in ein div mit der Klasse sidebar eingepackt, um das gewünschte Verhalten herauszufinden, damit andere Navigationsleisten auf meinem nicht betroffen sind Website, wie 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 eine Änderung am Umschalter des Hauptmenüs navbar hinzugefügt (da der obige Code auf meiner Site für ein "Untermenü" auf 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 noch angepasst:

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

in:

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

Wenn Sie nur ein navbar haben, müssen Sie sich vermutlich keine Sorgen machen, aber es hat mir in meinem Fall geholfen.

1
Markus

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

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

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
    }
}

Das 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.

0
Cosmin

Und für diejenigen, die mit einer Breite zusammenbrechen möchten weniger als die Standard-768px (erweitern mit einer Breite von weniger als 768px), ist dies das CSS, das benötigt wird:

@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;
}
}
0
tony day