In BootstrapWas ist die plattformfreundlichste Methode, um eine Navigationsleiste mit Logo A links, Menüelementen in der Mitte und Logo B rechts zu erstellen?

Folgendes habe ich bisher versucht und es wird so ausgerichtet, dass sich Logo A links befindet, Menüpunkte links neben dem Logo und Logo B rechts.

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

Update 2019

Bootstrap 4

Jetzt, da Bootstrap 4 über eine Flexbox verfügt, ist die Navbar-Ausrichtung viel einfacher. Hier finden Sie aktualisierte Beispiele für links , rechts und mittig in der Bootstrap 4-Navigationsleiste sowie viele andere hier gezeigte Ausrichtungsszenarien .

Die Dienstprogrammklassen Flexbox , Auto-Ränder und Reihenfolge können verwendet werden, um den Navbar-Inhalt nach Bedarf auszurichten. Es gibt viele Dinge zu beachten, einschließlich der Reihenfolge und Ausrichtung der Navbar-Elemente (Marke, Links, Togler) sowohl auf großen Bildschirmen als auch in den mobilen / reduzierten Ansichten. Verwenden Sie nicht die Rasterklassen (Zeile, Spalte) für die Navigationsleiste .

Hier sind verschiedene Beispiele ...

Links, Mitte (Marke) und rechts Links:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

http://www.codeply.com/go/qhaBrcWp3v

Eine weitere BS4 Navbar-Option mit Center-Links und Overlay-Logo :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Oder diese anderen Bootstrap 4-Ausrichtungsszenarien:

Marke links, Totpunkt-Links, (rechts leer)

Marken- und Linkmitte, Symbole links und rechts

Weitere Bootstrap 4-Beispiele :

Togler links auf dem Handy, Marke rechts in der
Mitte Marke und Links auf dem Handy
rechts Links auf dem Desktop ausrichten, Links in der Mitte auf dem Handy
links Links & Togler, Mitte Marke, Suche rechts

Siehe auch: Bootstrap 4-
Navigationsleistenelemente rechts ausrichten Bootstrap 4-Navigationsleiste rechts mit der Schaltfläche ausrichten, die auf dem Handy nicht zusammenfällt.
Zentrieren Sie ein Element in der Bootstrap 4-Navigationsleiste

Bootstrap 3

Option 1 - Markenzentrum mit Links- / Rechtsnavigationslinks:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)

Option 2 - Links-, Mittel- und Rechtsnavigationsverbindungen:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://www.bootply.com/SGYC6BWeBK

Option 3 - Zentrieren Sie sowohl die Marke als auch die Links

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

Mehr Beispiele:

Linke Marke, mittlere Links
Linker Toggler, mittlere Marke

Für 3.x siehe auch nav-gerechtfertigt: Bootstrap Center Navbar

Navigationsleiste in Bootstrap zentrieren
Bootstrap 4 richtet die Navigationsleistenelemente rechts aus

Bootstrap 4

Wir haben viele Möglichkeiten, navBars-Elemente auszurichten.

Für Linksausrichtung

class = "navbar-nav mr-auto "

Für die richtige Ausrichtung

class = "navbar-nav ml-auto "

Für Center Align

class = "navbar-nav mx-auto "

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

Ich brauchte etwas Ähnliches (links, mittig und rechts ausgerichtete Elemente), aber mit der Fähigkeit, zentrierte Elemente als aktiv zu markieren. Was für mich funktioniert hat war:

http://www.bootply.com/CSI2KcCoEM

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

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;
  }
}

Bootstrap 4 (ab Alpha 6)

Navbars sind mit Flexbox gebaut! Anstelle von Floats benötigen Sie Flexbox- und Margin-Dienstprogramme.

Für Align Right verwenden Sie justify-content-enddas collapsediv:

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

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

Schlag mir auf den Kopf, lies einfach meine Antwort noch einmal und stellte fest, dass das OP nach zwei Logos fragte, eines links und eines rechts mit einem mittleren Menü, nicht umgekehrt.

Dies kann ausschließlich im HTML-Code erreicht werden, indem Bootstraps "navbar-right" und "navbar-left" für die Logos und dann "nav-gerechtfertigt" anstelle von "navbar-nav" für Ihre UL verwendet werden. Es wird kein zusätzliches CSS benötigt (es sei denn, Sie möchten den Schalter zum Umschalten der Navigationsleiste in der Mitte des xs-Ansichtsfensters platzieren, müssen Sie ein wenig überschreiben, dies bleibt Ihnen jedoch überlassen).

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

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

Für diejenigen, die hierher gekommen sind und versucht haben, die "Marke" hier zu zentrieren, ist meine alte Antwort:

Ich weiß, dass dieser Thread ein wenig alt ist, aber nur um meine Ergebnisse zu veröffentlichen, wenn ich daran arbeite. Ich beschloss, meine Lösung auf Skellys Antwort zu stützen, da tomaszbaks Pausen auf Collaspe beruhten. Zuerst habe ich mein "navbar-center" erstellt und float für die normale navbar in meinem CSS deaktiviert:

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

.navbar-brand{
   float:none;
}

Das Problem mit der Antwort von skelly ist jedoch, dass wenn Sie einen wirklich langen Markennamen haben (oder ein Bild für Ihre Marke verwenden möchten), es beim Erreichen des sm-Ansichtsfensters aufgrund der absoluten Position und wie bei den Kommentatoren zu Überlappungen kommen kann sagte, sobald Sie das xs-Ansichtsfenster erreicht haben, bricht der Kippschalter (es sei denn, Sie verwenden die Z-Positionierung, aber ich wollte mich wirklich nicht darum kümmern müssen).

Ich habe also die auf Bootstrap reagierenden Dienstprogramme verwendet , um mehrere Versionen des Markenblocks zu erstellen:

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

Jetzt haben die lg- und md-Ansichtsfenster die Marke mit Links nach links und rechts zentriert. Sobald Sie das sm-Ansichtsfenster erreicht haben, werden Ihre Links in die nächste Zeile verschoben, damit Sie sich nicht mit Ihrer Marke überschneiden, und schließlich an den xs Im Ansichtsfenster wird die Kollaspe aktiviert und Sie können den Umschalter verwenden. Sie können noch einen Schritt weiter gehen und die Medienabfragen für navbar-right und navbar-left ändern, wenn sie mit navbar-brand verwendet werden, sodass die Links im sm-Ansichtsfenster alle zentriert sind, aber nicht die Zeit hatten, sie zu überprüfen.

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

Ich denke, 3 Marken zu haben ist vielleicht genauso mühsam wie das "z", aber ich denke, in der Welt des reaktionsschnellen Designs passt diese Lösung besser zu meinem Stil.

Ich fand, dass das Folgende eine bessere Lösung ist, abhängig vom Inhalt Ihrer linken, mittleren und rechten Elemente. Eine Breite von 100% ohne Rand verursachte eine Überlappung der Divs und verhinderte, dass Ankertags korrekt funktionierten - das heißt, ohne die unordentliche Verwendung von Z-Indizes.

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

Dies ist eine veraltete Frage, aber ich habe eine alternative Lösung gefunden, die ich direkt von der Bootstrap-Github-Seite aus teilen kann. Die Dokumentation wurde nicht aktualisiert und es gibt andere Fragen zu SO, die nach derselben Lösung fragen, wenn auch zu leicht unterschiedlichen Fragen. Diese Lösung ist nicht spezifisch für Ihren Fall, aber wie Sie sehen, ist die Lösung die <div class="container">richtige <nav class="navbar navbar-default navbar-fixed-top">, kann aber bei Bedarf auch durch eine andere ersetzt werden <div class="container-fluid".

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

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

und wird in V3 als nicht behoben aufgeführt.

<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

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

Sie setzen den Rand links auf auto -> ml-auto für den Abschnitt, den Sie nach rechts verschieben möchten.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>

Die einfachste Lösung:

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

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>