Центрирование содержимого навигационной панели в Bootstrap 4 (alpha 5)

Question

Я пытаюсь сосредоточить содержимое навигатора в Bootstrap 4, alpha 5. Я немного искал в googling, и, наверное, может быть какой-то трюк с участием d-block и mx-auto.

Однако я не могу понять, как центрировать навигационные ссылки так, чтобы они были в центре, а не просто добавляли вокруг них контейнер.

Пример кода навигатора Я играю с :.

<nav class="navbar navbar-light bg-faded"> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 dropdown"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     Dropdown link 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
     <a class="dropdown-item" href="#">Action</a> 
     <a class="dropdown-item" href="#">Another action</a> 
     <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
    </li> 
    </ul> 
</nav> 

JSFiddle if you like

Answer 1

Вы можете добавить этот код в файл CSS.

Answer 2

Центрирование элементов Navbar проще в Bootstrap 4 alpha 6 и не требует дополнительной разметки.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <ul class="navbar-nav mx-auto"> 
    <li class="nav-item active text-center"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
    </li> 
    <li class="nav-item text-center"> 
     <a class="nav-link" href="#">Features</a> 
    </li> 
    <li class="nav-item text-center"> 
     <a class="nav-link" href="#">Pricing</a> 
    </li> 
    <li class="nav-item dropdown text-center"> 
     <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     Dropdown link 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
     <a class="dropdown-item" href="#">Action</a> 
     <a class="dropdown-item" href="#">Another action</a> 
     <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
    </li> 
    </ul> 
</nav> 

Bootstrap 4 Center Navbar Demo (обновлена ​​для Beta)

Если вам нужно центрировать только определенные элементы, такие как марка или ссылки, see this answer