Центрирование элемента в Bootstrap 4 Navbar

Question

Центрирование элемента в Bootstrap 4 Navbar

Что бы я ни пытался, я не могу что-то центрировать в Navbar Bootstrap, какие-нибудь решения для этого?

Я попытался добавить div, используя margin:0 auto; или же margin-right:auto; margin-left:auto;, используемый center-block учебный класс. Ничего не работает, почему так сложно добиться чего-то такого простого, что я не могу понять, что я делаю не так?

Вот текущий код:

<nav class="navbar navbar-fixed-top navbar-dark main-nav">
<div class="container">
    <ul class="nav navbar-nav pull-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav text-center">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

63

css twitter-bootstrap bootstrap-4 navbar

Источник

user4814896 23 ноя '15 в 09:31

10 ответов

Решение

Обновлено для Bootstrap 4.1+

Bootstrap 4 навигационная панель теперь использует flexbox, поэтому Website Name может быть центрирован с помощью mx-auto, Левые и правые боковые меню не требуют поплавков.

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Rates</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Навбар центр с mx-auto демонстрация

Если в Навбар есть только один navbar-nav, затем justify-content-center также может быть использован для центрирования.

РЕДАКТИРОВАТЬ

В приведенном выше решении Website Name по центру относительно левого и правого navbar-nav так что если ширина этих соседних навигационных панелей отличается Website Name больше не по центру.

Чтобы решить эту проблему, можно использовать один из обходных путей flexbox для абсолютного центрирования...

Вариант 1 - Положение использования: абсолютное;

Так как в flexbox можно использовать абсолютное позиционирование, одним из вариантов является использование этого элемента для центрирования элемента.

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Навбар центр с абсолютной позицией Демо

Вариант 2 - использовать вложение flexbox

~~Наконец, еще один вариант - сделать центрированный элемент также~~ display:flexbox ~~и центр оправдан.~~ ~~В этом случае каждый компонент navbar должен иметь~~ flex-grow:1

Начиная с Bootstrap 4 Beta, теперь Navbar display:flex, Bootstrap 4.1.0 включает в себя новый flex-fill класс, чтобы каждый раздел навигации заполнял ширину:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark main-nav">
    <div class="container justify-content-center">
        <ul class="nav navbar-nav flex-fill w-100 flex-nowrap">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">More</a>
            </li>
        </ul>
        <ul class="nav navbar-nav flex-fill justify-content-center">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
        </ul>
        <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Help</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Навбар центр с раскладкой Flexbox Демо

До Bootstrap 4.1.0 вы можете добавить класс flex-fill следующим образом...

.flex-fill {
   flex:1
}

Bootstrap 4 демонстрации Navbar центра

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

84

Источник

user171456 11 фев '17 в 20:49

Использовать mx-auto сделает работу

<ul class="navbar-nav mx-auto">

2

Источник

user5571795 12 фев '19 в 15:21

У меня была похожая проблема; текст привязки в моей панели навигации Bootstrap4 не был отцентрирован. Просто добавил text-center в классе якоря.

1

Источник

user9165040 11 июн '18 в 16:27

Попробуй это.

.nav-tabs > li{
    float:none !important;
    display:inline-block !important;
}

.nav-tabs {
    text-align:center !important;
}

1

Источник

user3004837 23 ноя '15 в 09:44

Смотрите: /questions/19191795/tsentr-neuporyadochennogo-spiska-v-div/19191821#19191821, теперь вы можете использовать:

<nav class="navbar navbar-light main-nav">
<div class="container text-xs-center">
    <ul class="nav navbar-nav pull-xs-left">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Download</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>

    <ul class="nav navbar-nav" style="display: inline-block;">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item">
            <a class="nav-link" href="#">Rates</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Help</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>
</nav>

применять text-xs-center на вашем контейнере и установить display: inline-block; для вашего списка.

1

Источник

user1596547 23 ноя '15 в 21:27

Сделать новый стиль

.container {
    position: relative;
}
.center-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: auto;
    max-width: 200px;
    text-align: center;
}
.center-nav li{
  text-align: center;
  width:100%;
}

Замените название сайта UL ниже

<ul class="nav navbar-nav center-nav">
        <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
 </ul>

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

0

Источник

user4393366 23 ноя '15 в 10:00

У меня возникла проблема с центрированием текста. Это было исправлено navbar-текстом

      <ul class="nav navbar-nav navbar-right">
   <li class="navbar-text">
    @*@Html.ActionLink("Hello " + userName,"Index", "Manage", routeValues: null, 
htmlAttributes: new { title = "Manage", onclick = "javascript:return false;" 
})*@
  
 <p style="color: #999999;"> Hello  @userName</p>
</li>

0

Источник

user17381872 30 июн '22 в 22:14

Из документов

Навбары могут содержать биты текста с помощью.navbar-text. Этот класс регулирует вертикальное выравнивание и горизонтальный интервал для строк текста.

я применил класс.navbar-text к своему <li> элемент, поэтому результат

<li class="nav-item navbar-text">

это центрирует ссылки по вертикали относительно моего navbar-бренда img

0

Источник

user765523 20 ноя '16 в 23:34

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

    <nav class="navbar navbar-expand-md bg-light navbar-light fixed-top">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img src="your-logo"/></a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse mx-auto justify-content-md-center" id="collapsibleNavbar" >
    <ul class="navbar-nav col-md-auto">
      <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> 
</nav>

-1

Источник

user2225853 06 июн '19 в 10:29

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

user492767 29 авг '16 в 16:17 2016-08-29 16:17 · Accepted Answer · 2016-08-29 16:17

В Bootstrap 4 появилась новая утилита, известная как .mx-auto, Вам просто нужно указать ширину центрированного элемента.

Ссылка: http://v4-alpha.getbootstrap.com/utilities/spacing/

В отличие от ответа Басса Джобсена, который является относительным центром элементов на обоих концах, следующий пример является абсолютно центрированным.

Вот HTML-код:

<nav class="navbar bg-faded">
  <div class="container">
    <ul class="nav navbar-nav pull-sm-left">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 4</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-logo mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Brand</a>
      </li>
    </ul>
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 6</a>
      </li>
    </ul>
  </div>
</nav>

И CSS:

.navbar-logo {
  width: 90px;
}