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

Question

我正在尝试将导航栏内容集中在 Bootstrap 4，alpha 5 中。我一直在谷歌搜索，我想可能有一些涉及 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

在 Bootstrap 4 中将导航栏项目居中更简单，并且不需要额外的标记。

<nav class="navbar navbar-expand-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（针对 v4.0.0 更新）

如果您只需要将特定元素（例如品牌或链接）居中，see this answer

Answer 2

您不需要使用 css 来完成此操作，因为 bootsrap 的“mx-auto”类可以为您解决此问题。您可以简单地将以下内容添加到您的 ul 类中：

关于 boostraps 文档中水平居中的更多信息：https://getbootstrap.com/docs/4.4/utilities/spacing/