У Bootstrap , який є найбільш зручним для платформи способом створення панелі навігації, у якій ліворуч логотип A, пункти меню в центрі та логотип B праворуч?

Ось що я спробував поки що, і закінчується вирівнювання так, що логотип A знаходиться зліва, пункти меню поруч із логотипом зліва та логотипом B праворуч.

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

Оновлення 2019 року

Завантаження 4

Тепер, коли Bootstrap 4 має флексбокс, вирівнювання Navbar набагато простіше. Ось оновлені приклади ліворуч , праворуч та центру в Bootstrap 4 Navbar , та багато інших сценаріїв вирівнювання, продемонстровані тут .

Для вирівнювання вмісту Navbar за потребою можна використовувати класи flexbox , автоматичні поля та замовлення утилітних класів. Є багато речей, які слід враховувати, включаючи порядок та вирівнювання елементів Navbar (бренд, посилання, тумблер) як на великих екранах, так і на переглядах мобільних / згорнутих. Не використовуйте класи сітки (рядок, стовпчик) для Navbar .

Ось різні приклади ...

Ліва, центральна (марка) та права посилання:

<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

Ще один варіант BS4 Navbar із центральними посиланнями та зображенням логотипу накладання :

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

Або інші сценарії вирівнювання Bootstrap 4:

бренд ліворуч, посилання на мертвий центр, (порожній правий)

центр торгової марки та посилань, піктограми зліва та справа

Ще приклади Bootstrap 4 :

перемикач ліворуч на мобільний, бренд праворуч у
центрі торгової марки та посилання на
правий мобільний центр посилань на робочому столі, ліворуч на мобільних
лівих посиланнях і перемикач, бренд центру, пошук праворуч

Також дивіться: Bootstrap 4 вирівняйте елементи навигації праворуч
Bootstrap 4 вправо вирівнюйте за допомогою кнопки, яка не згортається на мобільному
центрі, елементом у Bootstrap 4 Navbar

Завантаження 3

Варіант 1 - центр торгової марки з лівими / правими навігаційними посиланнями:

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

Варіант 2 - Лівий, центральний і правий навісні посилання:

<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

Варіант 3 - Центруйте і бренд, і посилання

.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

Більше прикладів:

Ліва марка, центральні ланки
Лівий тумблер, бренд центра

Для 3.x також див. Nav-justify: Bootstrap center navbar

Центр Navbar у Bootstrap
Bootstrap 4 вирівняйте елементи навбара праворуч

Завантаження 4

У нас є багато способів вирівнювання елементів navBars.

Для лівої вирівнювання

class = "navbar-nav mr-auto "

Для правильного вирівнювання

class = "navbar-nav ml-auto "

Для центру Вирівняти

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>

Мені потрібно було щось подібне (ліворуч, центр і праворуч вирівняні елементи), але з можливістю позначити об'єкти в центрі як активні. Що для мене працювало:

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

Запуск 4 (станом на альфа-6)

Navbars побудовані за допомогою флексокса! Замість плавців вам знадобляться утиліти flexbox та margin.

Для вирівнювання правильного використання justify-content-endв 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>

Повний приклад тут: https://jsbin.com/kemawa/edit?output

Похитав головою, просто перечитав мою відповідь і зрозумів, що ОП просить два логотипи - один зліва праворуч із центральним меню, а не навпаки.

Це може бути досягнуто строго в HTML, використовуючи "navbar-right" і "navbar-left" Bootstrap для логотипів, а потім "nav-justified" замість "navbar-nav" для вашого UL. Додатковий CSS не потрібен (якщо ви не хочете поставити перемикач навибар-згортання в центрі у вікні перегляду xs, тоді вам потрібно перекрити трохи, але це залишиться вам).

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

Завантаження: http://www.bootply.com/W6uB8YfKxm

Для тих, хто потрапив сюди, намагаючись зосередити "бренд", ось моя стара відповідь:

Я знаю, що цей потік трохи старий, але просто для публікації своїх висновків, працюючи над цим. Я вирішив базувати своє рішення на відповіді Скеллі з часу перерв Томашбака на коласі. Спочатку я створив свій "navbar-центр" і вимкнув float для звичайного navbar у своєму CSS:

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

.navbar-brand{
   float:none;
}

Однак питання з відповіддю skelly полягає в тому, що якщо у вас дійсно довга назва бренду (або ви хочете використовувати зображення для свого бренду), то, як тільки ви дістанетесь до вікна перегляду sm, може виникнути перекриття через абсолютне положення і, як у коментаторів сказав, щойно ви потрапляєте до огляду xs, перемикач перемикається (якщо ви не використовуєте Z-позиціонування, але мені справді не хотілося про це турбуватися).

Тож, що я зробив, було використовувати утиліти, що реагують на завантаження, щоб створити кілька версій блоку марки:

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

Отже, тепер у вікнах перегляду lg та md розміщена торгова марка із посиланнями ліворуч та праворуч, як тільки ви дістанетесь до вікна перегляду sm, ваші посилання переходять на наступний рядок, щоб ви не перетиналися з вашим брендом, а потім нарешті на xs перегляньте провідний стовпчик, і ви зможете використовувати перемикач. Ви можете зробити цей крок далі і змінити медіа-запити для навигації праворуч і навібара-ліворуч при використанні з маркою navbar, так що у вікні перегляду sm посилання всі по центру, але не мали часу перевірити це.

Ви можете перевірити мою стару завантажувальну систему тут: www.bootply.com/n3PXXropP3

Я думаю, що 3 бренди можуть бути такими ж клопотами, як і "z", але я відчуваю, що у світі чуйного дизайну це рішення краще відповідає моєму стилю.

Я виявив, що наступне було кращим рішенням залежно від вмісту елементів зліва, центру та праворуч. Ширина 100% без запасу спричиняла перекриття дівок і перешкоджала правильній роботі тегів якорів - тобто без брудного використання z-індексів.

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

Це датоване запитання, але я знайшов альтернативне рішення для прямого доступу зі сторінки завантажувальної програми github. Документація не оновлювалася, і інші питання щодо SO вимагають того самого рішення, хоча і з дещо іншими питаннями. Це рішення не є специфічним для вашого випадку, але, як ви бачите, рішення є <div class="container">право після, <nav class="navbar navbar-default navbar-fixed-top">але також може бути замінено на <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>

Рішення знайдено на скрипці на цій сторінці: https://github.com/twbs/bootstrap/isissue/18362

і зазначено як виправлення у 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>

Поставте поля, які ви хочете до центру, праворуч або ліворуч відповідно до вищевказаного поділу.

Ви встановлюєте поле зліва на автоматичне -> ml-auto у розділі, який потрібно перемістити праворуч.

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

Найпростіше рішення:

Просто розділіть navbarна стовпці: наприклад, якщо у вас є 24 стовпчики, 12 будуть порожніми, а 12 збираються замінити навбар:

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