W Bootstrap , co jest najbardziej przyjaznym dla platformy sposób utworzyć pasek nawigacyjny, który ma logo po lewej stronie, pozycji menu w centrum, oraz logo B po prawej stronie?

Oto, co próbowałem do tej pory, i ostatecznie jest wyrównywany, tak aby logo A było po lewej stronie, pozycje menu obok logo po lewej stronie i logo B po prawej stronie.

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

Aktualizacja 2019

Bootstrap 4

Teraz, gdy Bootstrap 4 ma Flexbox, wyrównanie paska nawigacyjnego jest znacznie łatwiejsze. Oto zaktualizowane przykłady lewej , prawej i środkowej części paska nawigacyjnego Bootstrap 4 oraz wiele innych scenariuszy wyrównania pokazanych tutaj .

Schematu flexbox , auto-marże i zamawianie klasy narzędzie może być wykorzystywane w celu dostosowania zawartości NavBar ile potrzeba. Jest wiele rzeczy do rozważenia, w tym kolejność i wyrównanie elementów paska nawigacyjnego (marka, linki, przełącznik) zarówno na dużych ekranach, jak i widokach mobilnych / zwiniętych. Nie używaj klas siatki (wiersz, kolumna) dla paska nawigacyjnego .

Oto różne przykłady ...

Lewy, środkowy (marka) i prawy link:

<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

Kolejna opcja paska nawigacyjnego BS4 z linkami środkowymi i obrazem logo nakładki :

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

Lub te inne scenariusze wyrównania Bootstrap 4:

marka po lewej, martwe linki, (puste po prawej)

centrum marki i linków, ikony po lewej i prawej stronie

Więcej przykładów Bootstrap 4 :

przełącz na lewo na telefonie komórkowym, marka po prawej stronie
marki i linki na telefonie po
prawej stronie wyrównaj linki na komputerze, wyśrodkuj linki na telefonie po
lewej stronie linki i przełącz, po środku marki, szukaj po prawej

Zobacz także: Bootstrap 4 wyrównaj elementy paska nawigacyjnego w prawo
Pasek nawigacyjny Bootstrap 4 wyrównaj do przycisku, który nie zwija się w urządzeniu mobilnym
Wyśrodkuj element w pasku nawigacyjnym Bootstrap 4

Bootstrap 3

Opcja 1 - Centrum marki z linkami nawigacji w lewo / w prawo:

<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)

Opcja 2 - Lewy, środkowy i prawy link nawigacyjny:

<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

Opcja 3 - wyśrodkuj markę i linki

.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

Więcej przykładów:

Lewa marka, środkowe linki
Lewy przełącznik, środkowa marka

W wersji 3.x patrz także uzasadnienie nawigacji: środkowy pasek nawigacyjny Bootstrap

Wyśrodkuj pasek nawigacyjny w Bootstrap Bootstrap 4 wyrównaj elementy paska nawigacyjnego w
prawo

Bootstrap 4

Istnieje wiele sposobów wyrównywania elementów navBars.

Dla Left Align

class = "navbar-nav mr-auto "

Dla wyrównania do prawej

class = "navbar-nav ml-auto "

Do wyrównywania do środka

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>

Potrzebowałem czegoś podobnego (elementy wyrównane do lewej, środkowej i prawej), ale z możliwością oznaczenia elementów wyśrodkowanych jako aktywne. Dla mnie zadziałało:

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 (od wersji alfa 6)

Paski nawigacyjne są zbudowane z Flexboksa! Zamiast liczb zmiennoprzecinkowych potrzebujesz narzędzi typu flexbox i marginesów.

Aby użyć Align Right justify-content-endna 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>

Pełny przykład tutaj: https://jsbin.com/kemawa/edit?output

Uderz mnie w głowę, ponownie przeczytaj moją odpowiedź i zdałem sobie sprawę, że OP poprosił o dwa logo po jednym z lewej po prawej z centralnym menu, a nie na odwrót.

Można tego dokonać ściśle w kodzie HTML, używając logo „navbar-right” i „navbar-left” Bootstrap dla logo, a następnie „just-nav-justation” zamiast „navbar-nav” dla twojego UL. Dodatkowy CSS nie jest wymagany (chyba że chcesz umieścić przełącznik zwinięcia paska nawigacyjnego pośrodku w rzutni xs, musisz nieco przesłonić, ale pozostawi to tobie).

<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

Dla tych, którzy przybyli tutaj, próbując wyśrodkować „markę”, oto moja stara odpowiedź:

Wiem, że ten wątek jest trochę stary, ale po to, aby opublikować moje odkrycia podczas pracy nad tym. Postanowiłem oprzeć moje rozwiązanie na odpowiedzi Skelly'ego, odkąd Tomaszbak załamał się na collaspe. Najpierw stworzyłem „centrum paska nawigacyjnego” i wyłączyłem float dla normalnego paska nawigacyjnego w moim CSS:

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

.navbar-brand{
   float:none;
}

Jednak problem z odpowiedzią Skelly polega na tym, że jeśli masz naprawdę długą nazwę marki (lub chciałeś użyć obrazu swojej marki), to po przejściu do okna podglądu sm może się nakładać ze względu na absolutną pozycję i ponieważ komentatorzy mają powiedział, kiedy dojdziesz do rzutni xs, przełącznik przestanie działać (chyba że użyjesz pozycjonowania Z, ale tak naprawdę nie chciałem się tym martwić).

Więc wykorzystałem narzędzia responsywne bootstrap do stworzenia wielu wersji bloku marki:

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

Więc teraz rzutnie lg i md mają markę wyśrodkowaną z linkami po lewej i prawej stronie, kiedy dojdziesz do rzutni sm, twoje linki spadną do następnej linii, abyś nie nakładał się na twoją markę, a potem w końcu na xs rzutnia uruchamia się collaspe i możesz użyć przełącznika. Możesz pójść o krok dalej i zmodyfikować zapytania dotyczące multimediów dla paska nawigacyjnego z prawej i paska nawigacyjnego z lewej, gdy jest używany z marką navbar, aby w okienku podglądu sm wszystkie były wyśrodkowane, ale nie miały czasu na sprawdzenie.

Możesz sprawdzić mój stary bootply tutaj: www.bootply.com/n3PXXropP3

Wydaje mi się, że posiadanie 3 marek może być tak samo kłopotliwe jak „z”, ale wydaje mi się, że w świecie responsywnego projektowania to rozwiązanie lepiej pasuje do mojego stylu.

Odkryłem, że poniższe rozwiązanie jest lepszym rozwiązaniem w zależności od zawartości twoich lewej, środkowej i prawej pozycji. Szerokość 100% bez marginesu powodowała nakładanie się div i uniemożliwiała poprawne działanie tagów zakotwiczenia - bez bałaganu przy użyciu indeksów Z.

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

To jest przestarzałe pytanie, ale znalazłem alternatywne rozwiązanie do udostępnienia bezpośrednio ze strony github bootstrap. Dokumentacja nie została zaktualizowana i istnieją inne pytania dotyczące SO, proszące o to samo rozwiązanie, choć nieco inne pytania. To rozwiązanie nie jest specyficzne dla twojego przypadku, ale jak widać rozwiązanie jest <div class="container">zaraz po nim, <nav class="navbar navbar-default navbar-fixed-top">ale można je również zastąpić <div class="container-fluid"w razie potrzeby.

<!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>

Rozwiązanie znaleziono w skrzypcach na tej stronie: https://github.com/twbs/bootstrap/issues/18362

i jest wymieniony jako nie naprawiający się w V3.

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

Umieść pola, które chcesz wyśrodkować, w prawo lub w lewo zgodnie z powyższym podziałem.

Ustaw lewy margines na auto -> ml-auto w sekcji, którą chcesz przesunąć w prawo.

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

Najprostsze rozwiązanie:

Po prostu podziel navbarkolumny na: jeśli na przykład masz 24 kolumny, 12 będzie pustych, a 12 będzie ograniczać pasek nawigacji:

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