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

Bootstrap 4

Wir haben viele Möglichkeiten, um die Elemente der Navigationsleiste auszurichten.

Für linksbündige Ausrichtung

class = "navbar-nav mr-auto"

Für rechtsbündige Ausrichtung

class = "navbar-nav ml-auto"

Für zentrierte Ausrichtung

class = "navbar-nav mx-auto"

    Bootstrap 4

            Zuhause

            Über uns

            Kontaktiere uns

Answer 2

Bootstrap 4 (Stand alpha 6)

Navbars werden mit Flexbox erstellt! Anstatt Floats benötigen Sie Flexbox und Margin-Utilities.

Verwenden Sie für die Rechtsausrichtung justify-content-end auf dem collapse div:

      Home

Vollständiges Beispiel hier: https://jsbin.com/kemawa/edit?output

Answer 3

Ich brauchte etwas Ähnliches (links, zentrierte und rechts ausgerichtete Elemente), aber mit der Möglichkeit, zentrierte Elemente als aktiv zu kennzeichnen. Was für mich funktioniert hat, war:

http://www.bootply.com/CSI2KcCoEM

      Left 1
      Left 2
      Center 1
      Center 2
      Center 3
      Right 1
      Right 2

CSS:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

Answer 4

In Bootstrap 5 wurden die Klassen geändert, daher wird ml-auto mit ms-auto ersetzt UND mr-auto mit me-auto

Für left müssen wir s anstelle von l verwenden. Und Für Right müssen wir e anstelle von r verwenden

Answer 5

Kopf schlagen, habe gerade meine Antwort nochmal gelesen und festgestellt, dass der OP nach zwei Logos gefragt hat, eines links und eines rechts mit einem zentrierten Menü, nicht andersherum.

Dies kann streng im HTML durch Verwendung von Bootstraps "navbar-right" und "navbar-left" für die Logos erreicht werden und dann "nav-justified" anstelle von "navbar-nav" für Ihr UL. Kein zusätzliches CSS erforderlich (es sei denn, Sie möchten den Navbar-Collapse-Schalter im xs-Viewport in der Mitte haben, dann müssen Sie ein wenig überschreiben, aber überlasse das Ihnen).

        home
        about

Bootply: http://www.bootply.com/W6uB8YfKxm

---

Für diejenigen, die versuchen, das "Brand" zu zentrieren, hier ist meine alte Antwort:

Ich weiß, dieser Thread ist etwas alt, aber um meine Erkenntnisse beim Arbeiten daran zu veröffentlichen. Ich habe mich entschieden, meine Lösung auf skellys Antwort zu basieren, da tomaszbaks sich bei der Kollapsbehandlung jedoch auf seine Antwort verlässt. Zuerst habe ich meinen "navbar-center" erstellt und den Normalen Navbar in meinem CSS für Branding ausgeschaltet:

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

Das Problem bei skellys Antwort ist jedoch, wenn Sie einen wirklich langen Markennamen haben (oder wenn Sie ein Bild für Ihre Marke verwenden möchten), dann könnten bei Erreichen des SM-Viewports aufgrund der absoluten Positionierung Überlappungen auftreten, und wie die Kommentatoren bereits gesagt haben, wenn Sie den XS-Viewport erreichen, bricht der Umschaltknopf (es sei denn, Sie verwenden Z-Positionierung, aber ich wollte mich wirklich nicht darum kümmern).

Also habe ich die Bootstrap responsiven Hilfsprogramme genutzt, um mehrere Versionen des Brand-Blocks zu erstellen:

Jetzt haben die Viewports LG und MD Die Marke zentriert mit Links und Rechts, bei Erreichen des SM-Viewports fallen Ihre Links in die nächste Zeile, sodass Sie mit Ihrer Marke nicht überlappen, und schließlich beim XS-Viewport tritt der Kollaps ein und Sie können den Umschalter verwenden. Sie könnten dies noch weiterführen und die Medienabfragen für navbar-right und navbar-left anpassen, wenn diese mit navbar-brand verwendet werden, sodass im SM-Viewport alle Links zentriert sind, aber ich hatte keine Zeit, das zu überprüfen.

Sie können mein altes Bootply hier überprüfen: www.bootply.com/n3PXXropP3

Ich denke, dass drei Marken genauso viel Ärger machen könnten wie das Z, aber ich fühle, dass diese Lösung besser zu meinem Stil der responsiven Gestaltung passt.