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

Question

Начальная загрузка 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>

619

html css twitter-bootstrap bootstrap-4 navbar

Источник

user2934431 01 ноя '13 в 18:54

17 ответов

Другие вопросы по тегам html css twitter-bootstrap bootstrap-4 navbar

user171456 03 дек '13 в 21:27 2013-12-03 21:27 · Answer 1 · 2013-12-03 21:27

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 выравнивает элементы панели навигации вправо

user8089914 21 янв '19 в 12:50 2019-01-21 12:50 · Answer 2 · 2019-01-21 12:50

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>

user2540962 08 янв '17 в 04:29 2017-01-08 04:29 · Answer 3 · 2017-01-08 04:29

Bootstrap 4 (по состоянию на альфа 6)

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

Для выравнивания право использования justify-content-end на collapse ДИВ:

<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

user478584 26 окт '14 в 15:54 2014-10-26 15:54 · Answer 4 · 2014-10-26 15:54

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

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

user5846930 17 фев '22 в 07:13 2022-02-17 07:13 · Answer 5 · 2022-02-17 07:13

В bootstrap 5 классы изменены, поэтому для ml-auto изменяется с помощью ms-auto И mr-auto изменяется с помощью me-auto

Для левого мы должны использовать s вместо l , а для правого мы должны использовать e вместо r

14

Источник

user5846930 17 фев '22 в 07:13

user3609852 02 апр '15 в 20:43 2015-04-02 20:43 · Answer 6 · 2015-04-02 20:43

Чмокнул головой, просто перечитал мой ответ и понял, что ОП запрашивает два логотипа: один слева, другой справа с центральным меню, а не наоборот.

Это можно выполнить строго в HTML, используя Bootstrap "navbar-right" и "navbar-left" для логотипов, а затем "nav-juscted" вместо "navbar-nav" для вашего UL. Дополнительный CSS не требуется (если вы не хотите поместить переключатель navbar-collapse в центре в окне просмотра 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

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

Я знаю, что эта ветка немного старая, но просто чтобы опубликовать свои выводы, работая над этим. Я решил основывать свое решение на ответе Скелли с тех пор, как Томашбак сломал колласпе. Сначала я создал свой "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. в окне просмотра появляется Collaspe, и вы можете использовать переключатель. Вы можете сделать это еще дальше и изменить медиазапросы для navbar-right и navbar-left при использовании с navbar-brand, чтобы в окне просмотра sm все ссылки были отцентрированы, но у них не было времени проверить это.

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

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

user12340711 19 янв '21 в 22:03 2021-01-19 22:03 · Answer 7 · 2021-01-19 22:03

это обновление для BS5 и предлагаемое изменение для ответа @Zim. К сожалению, я не могу отправить правку, так как очередь редактирования заполнена. Было бы хорошо, если бы пользователь с высокой репутацией мог отправить правку после того, как очередь разрешила новые правки.

2021 Обновление

Bootstrap 5.0.0 бета-1

С добавлением RTL-поддержки, ml-auto а также mr-auto стали ms-auto а также me-auto (влево / вправо в начало / конец).

Bootstrap 5 также требует, чтобы панель навигации содержалась внутри container div.

Этот код создает эквивалент первого примера Bootstrap 4:

Левая, центральная (бренд) и правая ссылки:

      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
      <ul class="navbar-nav me-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 ms-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>
  </div>
</nav>

Masudur Rahman Sourav 28 дек '21 в 13:43 2021-12-28 13:43 · Answer 8 · 2021-12-28 13:43

В бутстрапе 5 ms-autoработал для меня, чтобы переместить элементы навигации правильно

код начальной загрузки был:

       <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

я изменился в ulярлык <ul class="navbar-nav">к <ul class="navbar-nav ms-auto mb-2 mb-lg-0">и это работало нормально для меня

мой код после редактирования:

       <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <a class="navbar-brand nav-title" href="#">Cooking Master</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

user10630791 23 май '20 в 20:16 2020-05-23 20:16 · Answer 9 · 2020-05-23 20:16

Вы устанавливаете маржу слева на auto -> 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>

user12036450 08 сен '19 в 07:40 2019-09-08 07:40 · Answer 10 · 2019-09-08 07:40

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

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

1

Источник

user12036450 08 сен '19 в 07:40

user1058292 29 май '14 в 09:24 2014-05-29 09:24 · Answer 11 · 2014-05-29 09:24

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

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

user1361532 09 фев '16 в 04:12 2016-02-09 04:12 · Answer 12 · 2016-02-09 04:12

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

user15273968 01 дек '21 в 19:14 2021-12-01 19:14 · Answer 13 · 2021-12-01 19:14

В ответе Зима пример 5 left and center only with empty space rightна самом деле не центрирует навигационные ссылки. Мы можем исправить это, внеся несколько изменений:

Переключитесь на полную страницу и измените размер браузера, чтобы увидеть навигационные ссылки.

Bootstrap не позволяет нам установить flex-basis:0, поэтому свойство остается autoи прокладка не расширяется одинаково. Таким образом, навигационные ссылки не центрированы.

Мы можем использовать класс position-absoluteна фирменной таре и mx-auto w-100на навлинкс. Переключатель устанавливает минимальную высоту панели навигации на 2,5 бэр. Это мы должны установить для жидкого контейнера div.

user10564524 25 июл '19 в 04:42 2019-07-25 04:42 · Answer 14 · 2019-07-25 04:42

Этот подход работал для меня:

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

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

0

Источник

user10564524 25 июл '19 в 04:42

user17434924 10 окт '23 в 06:15 2023-10-10 06:15 · Answer 15 · 2023-10-10 06:15

      I use a boostrap@5.3.2 in angular
I Achieve this Bootstrap NavBar with left, center or right aligned items

-1

Источник

user17434924 10 окт '23 в 06:15

user4759176 02 сен '18 в 22:21 2018-09-02 22:21 · Answer 16 · 2018-09-02 22:21

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

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

user8725395 26 дек '20 в 01:59 2020-12-26 01:59 · Answer 17 · 2020-12-26 01:59

Вы можете использовать этот формат

      <!-- NAVBAR START -->
        <nav class="navbar py-3 py-4 text-uppercase nav-over-video navbar-expand-lg navbar-white bg-white">
            <div class="container-fluid d-flex">
                <div class="justify-content-start">
                    <a class="navbar-brand" href="#">
                        <img src="img/logo.png" height="50px" alt="" class="img">
                    </a>
                </div>
                <div class="justify-content-end">
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-menu-button-wide" viewBox="0 0 16 16">
                                <path
                                    d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v2A1.5 1.5 0 0 1 14.5 5h-13A1.5 1.5 0 0 1 0 3.5v-2zM1.5 1a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-13z" />
                                <path
                                    d="M2 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm10.823.323l-.396-.396A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z" />
                            </svg>
                        </span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>

        <!-- As a link -->
        <!-- NAVBAR ENDS  -->