css - 在Bootstrap 4(alpha 5)中将导航栏内容居中

我正在尝试将导航栏内容放在引导4，alpha 5的中心。我在谷歌上搜索了一下，我想可能有一些技巧涉及到d-block和mx-auto。
但是，我无法找到如何将导航链接居中，以便它们完全居中，而不仅仅是在它们周围添加一个容器。
我正在玩的NAVBAR代码示例：。

<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

最佳答案

您可以将此代码添加到css文件中。

.nav {
  text-align: center;
}

.navbar-nav .nav-item {
  float: inherit;
  display: inline-block;
}