Bootstrap NavBar mit links-, zentrierten oder rechts-ausgerichteten Elementen

Question

In Bootstrap, was ist der platzfreundlichste Weg, um eine Navigationsleiste zu erstellen, die Logo A links, Menüpunkte in der Mitte und Logo B rechts hat?

Hier ist, was ich bisher versucht habe, und es endet damit, dass Logo A links, Menüpunkte neben dem Logo links und Logo B rechts ausgerichtet sind.

      Logo_A

        Home
        Menüpunkt 1
        Menüpunkt 2
        Menüpunkt 3

Answer 1

Das ist ein Update für BS5 und eine vorgeschlagene Bearbeitung für die Antwort von @Zim. Leider kann ich die Bearbeitung nicht einreichen, da die Bearbeitungswarteschlange voll ist. Es wäre gut, wenn ein Benutzer mit hoher Reputation die Bearbeitung einreichen könnte, sobald die Warteschlange neue Bearbeitungen zulässt.

2021 Update

Bootstrap 5.0.0 beta-1

Mit der Hinzufügung von RTL-Unterstützung werden ml-auto und mr-auto zu ms-auto und me-auto (links/rechts zu start/end).

Bootstrap 5 erfordert auch, dass die Navbar in einem Container-Div enthalten ist.

Dieser Code erzeugt das Äquivalent des ersten Bootstrap 4 Beispiels:

Links, Mitte(Logo) und rechte Links:

          Links

          Codeply

          Link

          Link

          Link

      Navbar 2

          Rechts

          Link

Answer 2

In Bootstrap 5 ms-auto hat für mich funktioniert, um die Navigationspunkte nach rechts zu verschieben

Der Bootstrap-Code war:

    Navbar

          Home

          Features

          Pricing

          Disabled

Ich habe bei ul Tag geändert

zu

und es hat gut für mich funktioniert

Mein Code nach der Bearbeitung ist:

      Cooking Master

            Home

            Features

            Pricing

            Disabled

Answer 3

Du setzt den linken Rand auf auto -> ml-auto auf der Sektion, die du nach rechts verschieben möchtest.

Answer 4

Ich fand folgendes eine bessere Lösung, je nach Inhalt Ihrer linken, zentralen und rechten Elemente. Eine Breite von 100% ohne einen Rand führte zu Überlappungen von DIVs und verhinderte, dass Anker-Tags korrekt funktionieren - das ist ohne die umständliche Verwendung von z-Indizes.

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

Answer 5

Dies ist eine veraltete Frage, aber ich habe eine alternative Lösung gefunden, die direkt von der Bootstrap-Github-Seite geteilt wurde. Die Dokumentation wurde nicht aktualisiert und es gibt auch andere Fragen auf SO, die nach der gleichen Lösung fragen, wenn auch zu leicht unterschiedlichen Fragen. Diese Lösung ist nicht spezifisch für deinen Fall, aber wie du sehen kannst, ist die Lösung der

direkt nach

, kann jedoch auch bei Bedarf durch`

ersetzt werden.

  Navbar-Rechter Padding Fehler

          Navigation umschalten

        Hallo

              Einloggen
              Konto erstellen

Die Lösung wurde auf einem Fiddle auf dieser Seite gefunden: https://github.com/twbs/bootstrap/issues/18362

und wird in V3 als "wird nicht behoben" aufgeführt.

`