Ich versuche Bootstrap 4 navbar zu machen, um flexbox zu benutzen. Ich konnte es fast schaffen, aber es gibt immer noch ein seltsames Javascript-Problem. Alles scheint zuerst zu funktionieren, aber wenn ich die navbar einmal öffne und dann schließe, fügt Bootstrap javascript den Elementstil "height: 0px;" zur navbar-toggable- {} Klasse. Dies führt dazu, dass das Element falsch positioniert wird, da ich "align-items: center" im übergeordneten Element verwende und wenn height auf null gesetzt ist, dann wird angenommen, dass die Elemente oben das Zentrum sind. Wenn ich diesen Stil manuell aus dem Element entferne, "behebt" er das Problem.Wie man bootstrap 4 navbar macht, um flexbox zu verwenden
Bild unten mein Problem zeigt:
Dies ist nur Fall, das ausfällt. Wenn das Element geöffnet ist, wenn ich die Größe des Fensters ändere, ist das Element an der normalen Position und es gibt keinen zusätzlichen Stil, der von Javascript hinzugefügt wird. Und wenn ich die komprimierte Navbar nicht öffne, funktioniert alles.
Also meine Frage ist, wie ich Bootstrap 4 navbar implementieren könnte, die tatsächlich funktioniert und flexbox verwendet? Ich denke, am einfachsten ist es, Bootstrap zu stoppen, indem man diesen zusätzlichen Stil zu Element hinzufügt. Es wird nicht benötigt, da dieses Element, wenn es nicht sichtbar ist, trotzdem "display: none" hat. Und wenn es sichtbar ist, sollte Höhe nicht sicher Null sein.
Bearbeiten: Ich habe ein wenig mehr Forschung und festgestellt, dass, wenn ich removeAttr ('Stil') an der richtigen Stelle in Bootstrap Javascript hinzufügen, dann scheint es das Problem zu beheben. Ich bin mir jedoch nicht sicher, ob dies der richtige Ansatz ist, um das zu beheben.
[Warum nicht flexbox für alle verwenden?] (Http://v4-alpha.getbootstrap.com/getting-started/flexbox/#how-it-works) – Vucko
Ich verwende wann immer möglich, aber nicht alle Komponenten in Bootstrap 4 Habe noch Flexbox-Unterstützung. – m5seppal
Ab alpha 6 ist die navbar flexbox – ZimSystem