Ändern Sie den Haltepunkt für das Reduzieren der Bootstrap-Navigationsleiste, ohne WENIGER zu verwenden

205

Derzeit wechselt die Navigationsleiste in den reduzierten Modus, wenn die Browserbreite unter 768px fällt. Ich möchte diese Breite auf 1000px ändern. Wenn der Browser unter 1000px liegt, wechselt die Navigationsleiste in den reduzierten Modus. Ich möchte dies tun, ohne WENIGER zu verwenden. Ich verwende einen Stift, der nicht WENIGER ist.

Mein Problem ist das gleiche wie in dieser Frage: Bootstrap 3 Navbar Collapse

Alle Antworten in diesen Fragen erklären jedoch, wie dies durch Ändern der Variablen WENIGER zu tun ist. Ich habe mich nicht mit WENIGER befasst, ich benutze einen Stift, also möchte ich wissen, wie dies mit einem Stift oder einer anderen Methode gemacht werden kann.

Vielen Dank!

Nahpunkt
quelle

Antworten:

50

Sie müssen hierfür eine bestimmte Medienabfrage schreiben. Aus Ihrer Frage wird unter 768px die Navigationsleiste ausgeblendet. Wenden Sie sie also einfach über 768px und unter 1000px an:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Dadurch wird der Zusammenbruch der Navigationsleiste bis zum Standardvorkommen der Bootstrap-Einheit ausgeblendet. Wenn die Collapse-Klasse umgedreht wird, werden die inneren Assets innerhalb des Navbar-Collaps automatisch ausgeblendet, so wie Sie Ihr CSS wie gewünscht einstellen müssen.

SaurabhLP
quelle
Derzeit wird die Navigationsleiste ausgeblendet, wenn die Breite unter 768 Pixel liegt. Ich möchte jedoch, dass die Navigationsleiste zusammenfällt, wenn die Breite unter 1000 Pixel liegt. Müssen Sie dafür nicht .collapse zwischen 768 und 1000 anzeigen?
Nearpoint
Ja, collapseKlasse ist wichtig für mobile Bildschirme. Wenn die Breite unter 768px liegt, wird die Navigationsleiste angezeigt display:none, sodass die erforderliche Aktion innerhalb der Markierungen 768 und 1000 angewendet wird ...
SaurabhLP
64
Dies funktioniert unter Bootstrap 3 nicht, da es eine andere Regel navbar-collapse.collapsegibt display: block !important. Das Deaktivieren führt dazu, dass die Schaltfläche zum collapse
Daniele Ricci,
42
Ja, eine Reihe von Bootstrap-Klassen muss in der benutzerdefinierten Medienabfrage überschrieben werden: bootply.com/120604
Zim
1
Haha, wer zum Teufel hat einen Bootstrap gebaut? Hätten wir nicht gedacht, dass wir dieses kleine Detail ändern müssten?
MH
400

2018 UPDATE

Bootstrap 4

Das Ändern des Navigationsleisten-Haltepunkts ist in Bootstrap 4 mithilfe der folgenden navbar-expand-*Klassen einfacher :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = mobiles Menü auf xs-Bildschirmen <576px
  • navbar-expand-md = mobiles Menü auf sm-Bildschirmen <768px
  • navbar-expand-lg = mobiles Menü auf MD-Bildschirmen <992px
  • navbar-expand-xl = mobiles Menü auf LG-Bildschirmen <1200px
  • navbar-expand = Verwenden Sie niemals das mobile Menü
  • (no expand class) = immer mobiles Menü verwenden

Wenn Sie navbar-expand-*das mobile Menü ausschließen, wird es in allBreiten verwendet. Hier ist eine Demo aller 6 Navbar-Zustände: Bootstrap 4 Navbar-Beispiel

Sie können auch einen benutzerdefinierten Haltepunkt (??? px) verwenden, indem Sie ein wenig CSS hinzufügen. Zum Beispiel hier ist 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Individuelle Navbar Breakpoint-
Bootstrap 4 Navbar Breakpoint- Beispiele


Bootstrap 3

Für Bootstrap 3.3.x ist hier das funktionierende CSS zum Überschreiben des Navigationsleisten-Haltepunkts. Wechseln Sie 991pxin die Pixelgröße des Punkts, an dem die Navigationsleiste zusammenfallen soll ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

Arbeitsbeispiel für 991px: http://www.bootply.com/j7XJuaE5v6
Arbeitsbeispiel für 1200px: https://www.codeply.com/go/VsYaOLzfb4 (mit Suchformular)

Hinweis: Das Obige funktioniert für alles über 768px . Wenn Sie es auf weniger als 768px ändern müssen, finden Sie hier das Beispiel von weniger als 768px .


Zim
quelle
Versuchen Sie diesen ersten Besuch: [link] ( getbootstrap.com/customize Locate: 'Weniger Variablen' -> 'Haltepunkte für Medienabfragen' Änderung: @ screen-lg-Wert von 1200px auf 1920px Locate: "Grid system" -> @ grid-float -breakpoint Change: @ screen-sm-min zu @ screen-lg Scrollen Sie zum Ende der Seite. Klicken Sie auf "Kompilieren und Herunterladen". Extrahieren Sie diese heruntergeladenen Dateien und verwenden Sie sie.
rpalzona
6
Dieser obige Code funktioniert, wenn ich einen Wert höher als 768px einstelle, aber ich muss das Gegenteil erreichen ... Ich möchte, dass er beispielsweise bei 400px zusammenbricht, aber wenn ich diesen Wert einstelle, scheint Bootstrap den ursprünglichen 768 aufzunehmen - Irgendwelche Ideen? Vielen Dank
Chris Richards
6
Obwohl diese Antwort wie ein Zauber funktioniert, aber das Dropdown-Menü durcheinander bringt , müssen Sie möglicherweise die Antwort verbessern.
Abhishek Pandey
2
@AbhishekPandey Ich fand diese Antwort nützlich (Teil bezüglich Dropdown)
cbuchart
1
Danke dir. Im Gegensatz zur "Lösung" mit dem Häkchen daneben funktioniert Ihr Code tatsächlich.
Michael S. Miller
46

Ändern Sie in bootstrap3 diese Variable @ grid-float-breakpoint in die gewünschte. Der Standardwert ist 768px

fengd
quelle
17
Können Sie bitte ein Beispiel posten?
e.thompsy
2
Beachten Sie, dass Sie, wenn Sie sass verwenden und den Herstellercode nicht ersetzen möchten (dies sollte nicht der Fall sein), die Datei, die die Variable enthält, vor den Bootstrap-sass-Dateien in Ihren benutzerdefinierten Wert aufnehmen müssen. Der Grund dafür ist, dass alle Variablen von Bootstrap auf Standard gesetzt sind! Werte, daher müssen wir diese Werte überschreiben, indem wir zuerst unsere Variablen importieren.
Makis K.
Bitte fügen Sie ein Beispiel hinzu, wie das geht ... Ich bin neu in Bootstrap und grep zeigt 0 Instanzen dieser Variablen in meinem Projekt an.
Matt Clark
1
@MattClark @grid-float-breakpointist im Compiler definiert: getbootstrap.com/customize - der Standardwert ist, @screen-sm-minaber Sie können ihn in ändern 1234px.
Rybo111
24

Schließlich wurde unter http://getbootstrap.com/customize/ herausgefunden, wie Sie die Kollapsbreite ändern können, indem Sie mit '@ grid-float-breakpoint' herumspielen .

Gehen Sie zu Zeile 2923 in bootstrap.css (auch Min-Version) und wechseln Sie @media screen and (min-width: 768px) {zu@media screen and (min-width: 1000px) {

Der Code lautet also:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}
Stephen
quelle
Beachten Sie, dass die von Ihnen angegebene
Zeilennummer
1
Habe gerade das @grid-float-breakpointin meinen responsive.lessArbeiten für mich geändert !
cvng
6
Sie sollten dies in einer anderen CSS-Datei überschreiben, anstatt die Bootstrap-CSS-Dateien direkt zu ändern.
Ivanka Todorova
1
Erster Besuch: [Link] ( getbootstrap.com/customize Locate: 'Weniger Variablen' -> 'Haltepunkte für Medienabfragen' Änderung: @ screen-lg-Wert von 1200px auf 1920px Locate: "Grid system" -> @ grid-float-breakpoint Ändern Sie: @ screen-sm-min zu @ screen-lg Scrollen Sie zum Ende der Seite. Klicken Sie auf "Kompilieren und Herunterladen". Extrahieren Sie diese heruntergeladenen Dateien und verwenden Sie sie.
rpalzona
13

Ich habe dies gerade erfolgreich mit dem folgenden CSS-Code gemacht.

@media(max-width:1000px)  {

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

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

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

}
Ruperto17
quelle
2
Die reduzierte Menüschaltfläche wird nicht angezeigt, wenn die Breite zwischen 768 und 1000 Pixel liegt.
Handwerker
4
@craftsman: Verwenden Sie für die Schaltfläche Folgendes: .navbar-toggle {display: block! important; } .navbar-header {width: 100%; Höhe: 60px; }
Aniket Suryavanshi
3
zeigt immer noch nicht den Inhalt im Hamburger-Menü
behzad
13

Im Bootstrap 3. WENIGER Quellcode ist eine Variable definiert, die in variables.lessaufgerufen definiert @grid-float-breakpointist und den folgenden hilfreichen Kommentar enthält:

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

Der Übereinstimmungswert @grid-float-breakpoint-maxwird auf minus 1px gesetzt:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Lösung:

Setzen Sie den @grid-float-breakpointWert stattdessen einfach auf 1000px und erstellen Sie ihn neu bootstrap.lessin bootstrap.css:

z.B

@grid-float-breakpoint: 1000px;
Codierung weg
quelle
Wie kann ich wieder aufbauen? Ich habe diese Kommandozeile ausprobiert: $ lessc bootstrap.less bootstrap.cssaber nichts ist passiert
AnthonyR
@AnthonyRn: Ich habe keine Ahnung, wie Ihr Projekt eingerichtet ist. Ich habe einfach die Bootstrap LESS-Quelle in meinem VS 2013-Projekt aktualisiert und sie beim Speichern neu erstellt. Vielleicht solltest du eine neue Frage stellen?
Gone Coding
Mein Problem wurde mit dem Online-Customizer-Tool von Bootstrap hier gelöst. Getbootstrap.com/customize Vielen Dank für die Lösung!
AnthonyR
1
Ich denke, dies sollte die akzeptierte Antwort sein, da es Bootstraps-eigene Methoden zum Definieren des Haltepunkts verwendet. Als Beispiel konnte ich den Bootstrap einfach neu erstellen und das gewünschte Ergebnis erzielen, indem ich diese Variable auf den Haltepunkt setzte.
Serge Melis
@AnthonyR Zum Wiederherstellen verwenden Sie den Befehl grunt, mit grunt distdem das dist-Verzeichnis neu erstellt wird. Sie führen diesen Befehl in dem Verzeichnis aus, in dem Sie Ihre gruntfile.js haben. Referenz: getbootstrap.com/getting-started/#grunt
Radmation
11

Die Sass-Methode zum Ändern von Bootstrap-Variablen ist tatsächlich auf der Bootstrap-Sass- Github-Seite dokumentiert.

Definieren Sie einfach die Variablen neu, bevor Sie @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
tropischer Fisch
quelle
7

Fügen Sie zusätzlich zu @Skely answer auch die zu überschreibenden Klassen hinzu , damit Dropdown-Menüs in der Navigationsleiste funktionieren. Letzter Code unten:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

Demo-Code

Jacvalle
quelle
4

In Bootstrap v4 kann die Navigation früher oder später mithilfe verschiedener CSS-Klassen reduziert werden

z.B:

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

Mit der Schaltfläche zur Navigation:

  • versteckt-sm-up
  • versteckt-md-up
  • versteckt-lg-up
Eddie Jaoude
quelle
In der aktuellen Alpha, scheint nur navbar-toggleable-smfür mich zu gehen , xsmacht es nie umschalten. Könnte sein, dass ich etwas falsch mache. Vielen Dank!
Nerdwaller
@nerdwaller sieht so aus, als ob Sie Recht haben. Sie haben eine Bearbeitung von xs nach sm vorgenommen.
Whitneyland
3

Für Bootstrap 3.3 ist dies der einzige Code, den Sie benötigen:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
VeeK
quelle
Funktioniert nicht vollständig. Die angezeigten Menüelemente sind nicht vertikal, sondern horizontal.
Volomike
3

Das hat bei mir Bootstrap3 geklappt

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

Es hat eine Weile gedauert, um diese beiden herauszufinden:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}
Khaled
quelle
Das hat bei mir funktioniert. Die einzige Ausnahme ist, dass die minimale Pixelbreite in Ihrem obigen Beispiel 1000px betragen sollte.
Sascha
2

Am besten verwenden Sie einen Port des von Ihnen verwendeten CSS-Prozessors.

Ich bin ein großer Fan von SASS, daher verwende ich derzeit https://github.com/thomas-mcdonald/bootstrap-sass

Es sieht so aus, als gäbe es hier eine Gabel für Stylus: https://github.com/Acquisio/bootstrap-stylus

Ansonsten ist Search & Replace Ihr bester Freund direkt in der CSS-Version ...

Allaire
quelle
Bedeutet dies für die Such- und Ersetzungsoption, dass die Medienabfragen von bootstrap.css direkt bearbeitet werden? Kann ich eine Medienabfrage ändern, die nur für die Navigationsleiste gilt? Mir wurde gesagt, dass es keine gute Idee ist, die Quell-Bootstrap-Dateien zu bearbeiten, aber ich weiß nicht warum, was denkst du?
Nearpoint
1

Hallo, ich denke, Sie können es mit CSS wie diesem tun. Sie können das Haltepunkt-Bootstrap-Menü ändern

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}
Yasssine ELALAOUI
quelle
1

Navbars können die Klassen .navbar-toggler, .navbar-Collapse und .navbar-expand {-sm | -md | -lg | -xl} verwenden, um Änderungen vorzunehmen, wenn ihr Inhalt hinter einer Schaltfläche zusammenfällt. In Kombination mit anderen Dienstprogrammen können Sie leicht auswählen, wann bestimmte Elemente ein- oder ausgeblendet werden sollen.

Fügen Sie für Navigationsleisten, die niemals zusammenbrechen, die Klasse .navbar-expand zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer zusammenbrechen, keine .navbar-expand-Klasse hinzu.

Zum Beispiel :

<nav class="navbar navbar-expand-lg"></nav>

Das mobile Menü wird auf einem großen Bildschirm angezeigt.

Referenz: https://getbootstrap.com/docs/4.0/components/navbar/

Aung San Myint
quelle
Ja, dieser funktioniert für mich genau so, wie ich es brauchte. Wenn Sie spezifischere Haltepunkte benötigen, müssen Sie natürlich Ihre eigene Medienabfrage konfigurieren (daher die günstige Antwort auf diese Frage)
Coderhi
0

Das hat mir den Trick getan:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
Jeanverster
quelle
Bei Ihrer Lösung und der von Veek stelle ich fest, dass sich die Ränder zwischen 768 und 1000 nicht richtig erweitern. Sie sind außerhalb dieser Grenzen in Ordnung. Bei Ihrer Lösung bleibt das Symbol für das reduzierte Menü auch nach dem Reduzieren nicht rechts, sondern drückt gegen die "Marke".
Mike O'Connor
Tut mir leid, ich habe anscheinend gepatzt. Ich habe immer noch das Problem, dass die unangemessen breiten Ränder innerhalb dieser Grenzen erscheinen. Jetzt sehe ich jedoch, dass ein offizielles Online- Bootstrap-Beispiel nativ das gleiche Randproblem aufweist.
Mike O'Connor
0

In Bootstrap 4 müssen Sie diesen Stil / diese Definition in bootstrap.css finden und in Ihrem neu definieren, wenn Sie Navbar-expand- * überschreiben, erweitern und reduzieren sowie den Hamburger (navbar-toggler) anzeigen und ausblenden möchten eigene customstyle.css (oder direkt in bootstrap.css, wenn Sie so geneigt sind).

Z.B. Ich wollte, dass der navbar-expand-lg zusammenbricht und den navbar-toggler bei 950px zeigt. In bootstrap.css finde ich:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Und darunter ...

@media (min-width:992px) { 
    ... lots of styling ...
}

Ich habe beide @ media-Abfragen kopiert und in meine style.css eingefügt und dann die Größe an meine Bedürfnisse angepasst. In meinem Fall wollte ich, dass es bei 950px zusammenbricht. Die @ media-Abfragen müssen unterschiedliche Größen haben (ich vermute), daher habe ich die maximale Breite des Containers auf 949,98 Pixel festgelegt und 950 Pixel für die andere @ media-Abfrage verwendet. Daher wurde der folgende Code an meine style.css angehängt. Dies war nicht leicht von verdrehten Lösungen zu trennen, die ich bei Stackoverflow und anderswo gefunden hatte. Hoffe das hilft.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}
Jack Mason
quelle
0

Hier mein Arbeitscode mit in React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>
webmastx
quelle
0

Es wird jetzt von Bootstrap 4.4 unterstützt

navbar-expand-sm 
Rick
quelle
Ja richtig, aber Sie würden navbar-expand-lg benötigen, um das Navi auf großen Bildschirmen zu
reduzieren