Как центрировать навигационные элементы в Bootstrap?

Question

Что делать, если я хочу центрировать элементы навигации (ссылки) на панели навигации в соответствии с размером окна браузера в Bootstrap 4. Посмотрите на код:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 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>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <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="#">Disabled</a>
        </div>
    </div>
</nav>

Теперь я хочу центрировать div "navbar-nav" в соответствии с шириной браузера. Одна вещь, которую я попробовал, дает mr-auto и ml-auto, которые, кажется, центрируют его, но не точно. Что он на самом деле делает, так это центрирует его по ширине "ширина окна браузера - ширина логотипа" . Я хочу, чтобы он был в центре точно посередине экрана.

Я также пытался изменить положение на абсолютное, но опять же, этот вид портит компоновку и в свернутом режиме.

Answer 1

Используйте flexbox и утилиты margin отзывчиво...

Bootstrap 4 alpha 6 http://codeply.com/go/YvzHvQQRAs (центр бренда и ссылки)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 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="d-md-flex d-block flex-row mx-md-auto mx-0">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <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="#">Disabled</a>
            </div>
        </div>
    </div>
</nav>

Bootstrap 4.1 https://www.codeply.com/go/sTJUthyswN (центр бренда, выравнивание по левому краю на мобильном телефоне)

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

Ответ по-прежнему в основном тот же. использование mx-auto в центр.

http://codeply.com/go/mycC5z8lpJ (центральные ссылки, бренд слева)

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 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>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav mx-auto">
            <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link disabled" href="#">Disabled</a>
        </div>
    </div>
</nav>

Если вы хотите, чтобы ссылки были точно центрированы в окне просмотра, см. Второй пример здесь: http://www.codeply.com/go/RCBftzZCD8

Другие примеры выравнивания Bootstrap 4 Navbar

Также смотрите...

Центрирование элемента в Bootstrap 4 Navbar
Центр Navbar ссылки без бренда подталкивая его вправо в Bootstrap 4?
Как центрировать навигационную панель в Bootstrap 4 с помощью Flexbox
Как разместить содержимое панели навигации в Bootstrap 4
Bootstrap 4 Navbar выравнивает логотип по центру и переключает значок слева

Answer 2

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

#navbarNavAltMarkup {
  position: absolute;
  text-align: center;
}
#navbarNavAltMarkup > div {
  display: inline-block;
  width: 100%;
}
#navbarNavAltMarkup > div > a {
  display: inline;
}

Это делает контейнер меню независимым от его родителя, дает ему полную ширину и выравнивает элементы внутри него по центру.

https://codepen.io/anon/pen/XRggYY

Answer 3

.navbar-nav .nav-link,
.navbar-brand {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" 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>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <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="#">Disabled</a>
    </div>
  </div>
</nav>