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

Question

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

259

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

Aliv 01 нояб. 2013, в 19:34

Источник

Теги:

twitter-bootstrap

html

css

bootstrap-4

navbar

8 ответов

Ещё вопросы

Zim · Answer 1 · 2013-12-03T23-17-00.000Z

2018 Обновление

Bootstrap 4

Теперь, когда Bootstrap 4 имеет flexbox, выравнивание Navbar стало намного проще. Вот обновленные примеры для левой, правой и центральной частей в Bootstrap 4 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 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 примера jsfiddle, так как bootply сейчас не работает. соль 1 и соль 2 . кстати, решение 2 работает лучше (imho)
Для Bootstrap 4, используя Firefox, пример № 1 не работает. Добавление класса .abs приводит к navbar-brand элемент navbar-brand закрывает кнопки слева и справа, что делает их неактивными

tomaszbak · Answer 2 · 2014-10-26T16-47-00.000Z

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

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

Это довольно близко, но оно ломается, когда вы его рушите. Если вы просматриваете его на мобильном устройстве, «Бренд» отображается под строкой меню. Разве Бренд не является частью настоящего Nav?
Пока это работает для меня. У меня нет ни Бренда, ни правильно выровненного элемента, только 3 варианта по центру. Спасибо
Я думаю, что это решение работает лучше, чем ответ с наибольшим количеством голосов в том, что при уменьшении размера экрана ни один из элементов не висит на панели навигации (по крайней мере в общем примере кода)

Jeremy Lynch · Answer 3 · 2017-01-08T04-42-00.000Z

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

У меня не работает ... Похоже, что justify-content-end применяется к nav и не работает для navbar - это последняя версия начальной загрузки.
@stephanePaquet, это применимо к альфа 6 (самый последний релиз начальной загрузки) - что вы используете?

Jonofthedead · Answer 4 · 2015-04-02T22-12-00.000Z

Похлопайте меня по голове, просто перечитайте мой ответ и поняли, что 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", но я чувствую себя в мире отзывчивого дизайна. Это решение лучше всего подходит для моего стиля.

Shawn · Answer 5 · 2016-02-09T06-04-00.000Z

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

orangesherbert · Answer 6 · 2014-05-29T10-18-00.000Z

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

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

Jammy Nemo · Answer 7 · 2019-01-21T13-29-00.000Z

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

parsecer · Answer 8 · 2018-09-02T23-09-00.000Z

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

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

Строка и столбец сетки не должны использоваться внутри Navbar. Используйте поддерживаемый контент .
@Zim Почему бы и нет, что в этом плохого?