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

hello    
hello
hello
hello
hello

Platzieren Sie die Felder, die Sie zentrieren, rechts oder links möchten, entsprechend der obigen Aufteilung.

Answer 2

In Zims Antwort zentriert sich das Beispiel 5 links und Mitte nur mit leerem Raum rechts nicht wirklich die Navlinks. Wir können das mit ein paar Änderungen beheben:

  Zims Originalcode

      Navbar 5

            Link

            Codeply

            Link

  Mitte

  Modifizierte Lösung

        Navbar 5

            Link

            Codeply

            Link

  Mitte

  body {
   font-family: monospace;
   padding: 10px
  }

  .centerMarker {
   margin: 0 auto;
   width: fit-content;
   background-color: wheat;
  }

Wechseln Sie zur Vollbildansicht und ändern Sie die Browsergröße, um die Navlinks zu sehen.

Bootstrap erlaubt uns nicht, flex-basis:0 zu setzen, daher bleibt die Eigenschaft auto und der Abstand vergrößert sich nicht gleichmäßig. Daher werden die Navlinks nicht zentriert.

Wir können die Klasse position-absolute auf den Markencontainer und mx-auto w-100 auf den Navlinks verwenden. Der Auswähler setzt die Mindesthöhe der Navigationsleiste auf 2,5rem. Das müssen wir im Fluid-Div-Container einstellen.

Answer 3

Die einfachste Lösung:

Teilen Sie die Navbar einfach in Spalten auf: Wenn Sie insgesamt 24 Spalten haben, sind 12 leer und 12 enthalten die Navbar:

              Startseite
              Erster Link
              Zweiter Link
              Dritter Link
              Vierter Link

Answer 4

Ich verwende ein Bootstrap@5.3.2 in Angular.
Ich erreiche diese Bootstrap NavBar mit links-, zentriert- oder rechtsausgerichteten Elementen.