it-roy-ru.com

Центрирование элемента в 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>

31
LuTz

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

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

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

Вот 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;
}
22
Victor

Обновлено для 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>

Центр Navbar с mx-auto Демо

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

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

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

 enter image description here

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

Вариант 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>

Центр Navbar с вложением flexbox Демонстрация

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

.flex-fill {
   flex:1
}

Начиная с 4.1 flex-fill включен в Bootstrap.


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

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

 enter image description here

45
Zim

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

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

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

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

1
Christy

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

<ul class="navbar-nav mx-auto">
1
Hezy Ziv

Смотрите: https://stackoverflow.com/a/14146967/1596547 , теперь вы можете использовать:

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

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

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

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

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

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

0
austin

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

.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
Ajay Makwana