Custom Theme Bootstrap

Also habe ich mein benutzerdefiniertes Thema mit Bootstrap gemacht und alles funktioniert gut und ich erwarte es, wenn ich es auf ein Tablet-Gerät lege. Das Problem, das ich habe, ist die Navbar kollabiert nicht, wenn das Menü und das Logo in die gleiche Zeile gehen.

Siehe Bild unten: http://printscr.com/9mewuw

Die Sache ist, dass es vollständig auf einem mobilen Gerät zusammenbricht, nur nicht auf einem Tablet-Gerät wie dem iPad. Ich frage mich, was das damit zu tun hat.

Solutions Collecting From Web of "Custom Theme Bootstrap"

Wenn Sie eine LESS-Version von Bootstrap (nicht kompiliert) haben, müssen Sie die @grid-float-breakpoint Variable auf 992px ändern, damit die Navbar auf dem “Tablet” (Medium) -Breakpoint minimiert wird. Quelle:

Ändern des minimierten mobilen Navigationsleistenhaltepunkts

Die Navigationsleiste wird in die vertikale mobile Ansicht minimiert, wenn das Ansichtsfenster schmaler als @ grid-float-breakpoint ist, und in die horizontale nicht mobile Ansicht maximiert, wenn das Ansichtsfenster mindestens @ grid-float-breakpoint in der Breite ist. Passen Sie diese Variable in der Quelle “Weniger” an, um zu steuern, wann die Navigationsleiste ausgeblendet wird. Der Standardwert ist 768px (der kleinste “kleine” oder “Tablet” Bildschirm).

Wenn nicht, und Sie haben nur ein paar Änderungen an Bootstrap vorgenommen, wäre es am besten, es erneut über den Customizer zu laden: http://getbootstrap.com/customize/

Besuchen Sie die Seite, suchen Sie nach @grid-float-breakpoint ( ungefähr auf halber Seite der Seite ) und ändern Sie den Wert in @screen-md-min (siehe Screenshot). Dies sollte dann das Problem für Sie beheben.

Bildbeschreibung hier eingeben


Wenn Sie Bootstrap nicht neu kompilieren möchten, können Sie stattdessen eine überschreibende Medienabfrage erstellen und alle Navigationsreferenzen unter der ursprünglichen Medienabfrage (768px) hineinkopieren. Dies ist jedoch nicht die ideale Lösung, um sicherzustellen, dass Sie alles bekommen, was es wert ist, nach der Datei bootstrap/less/navbar.less auf github zu suchen ( https://github.com/twbs/bootstrap/blob/master/less/ navbar.less ) Finden Sie eine beliebige Instanz von @media (min-width: @grid-float-breakpoint) { ... } und das ist der Code, den Sie ersetzen müssen.

 @media (min-width: 992px) { //All min-width: 768px navbar code }