Начальная загрузка NavBar с левыми, центральными или правыми выровненными элементами

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

Ответы

Ответ 1

2019 Обновление

Bootstrap 4

Теперь, когда Bootstrap 4 имеет flexbox, выравнивание Navbar стало намного проще. Вот обновленные примеры для левой, правой и центральной частей в Bootstrap 4 Navbar, а также множество других сценариев выравнивания, продемонстрированных здесь.

Flexbox, авто-поля и служебные классы упорядочения могут использоваться для выравнивания содержимого Navbar по мере необходимости. Есть много вещей, которые следует учитывать, включая порядок и выравнивание элементов Navbar (бренд, ссылки, переключатели) как на больших экранах, так и на мобильных/свернутых видах. Не используйте классы сетки (row, col) для 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 navbar по правому краю с кнопкой, которая не сворачивается на мобильном телефоне
Центрирование элемента в Bootstrap 4 Navbar

Bootstrap 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

Вариант 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- jusified: Bootstrap center navbar

Центр Навбар в Bootstrap
Bootstrap 4 выравнивает элементы навигационной панели вправо

Ответ 2

Мне нужно было что-то подобное (левое, центральное и правое выравнивание), но с возможностью отмечать центрированные элементы как активные. Что для меня работало:

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

Ответ 3

Bootstrap 4 (от альфа 6)

Navbars построены с помощью flexbox! Вместо поплавков вам понадобятся flexbox и утилиты margin.

Для выравнивания справа используйте justify-content-end в collapse div:

<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

Ответ 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>

Ответ 5

Похлопайте меня по голове, просто перечитайте мой ответ и поняли, что OP просил два логотипа один слева, с центральным меню, а не наоборот.

Это можно сделать строго в HTML, используя Bootstrap "navbar-right" и "navbar-left" для логотипов, а затем "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>

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

Для тех, кто здесь пытался центрировать "бренд", вот мой старый ответ:

Я знаю, что эта ветка немного старая, но просто чтобы опубликовать мои выводы, работая над этим. Я решил основать свое решение на skelly, так как tomaszbak ломается на collaspe. Сначала я создал свой "навигационный центр" и отключил float для обычного navbar в моем CSS:

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

.navbar-brand{
   float:none;
}

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

Итак, я использовал утилиту bootstrap отзывчивые утилиты для создания нескольких версий блока бренда:

<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 были сконцентрированы ссылки, но не было времени проверить его.

Вы можете проверить мой старый bootply здесь: www.bootply.com/n3PXXropP3

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

Ответ 6

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

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

Ответ 7

Это датированный вопрос, но я нашел альтернативное решение для совместного использования с начальной страницы 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/issues/18362

и указан как не будет исправлено в V3.

Ответ 8

Другие подходы не спомогли мне, однако, это сработало.

.navbar,
.navbar-collapse {
    padding-right: 10%;
    padding-left: 10%;
}

.navbar-header{
    padding-left: 10%;
}

Надеюсь, поможет.

Ответ 9

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

Поместите поля, которые вы хотите центрировать, вправо или влево в соответствии с вышеприведенным делением.

Ответ 10

Самое простое решение:

Просто разделите 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>