在Bootstrap 4(alpha 5)中将导航栏内容居中 [英] Centering the navbar content in Bootstrap 4 (alpha 5)

问题描述

我正在尝试在Bootstrap 4 alpha 5中将导航栏内容居中.我已经进行了一些谷歌搜索，我想可能会有一些涉及d-block和mx-auto的技巧.

I am trying to center the navbar content in Bootstrap 4, alpha 5. I have been googling a bit, and I guess there might be some trick involving d-block and mx-auto.

但是，我无法找到如何使导航链接居中，以使它们位于中心，而不仅仅是在它们周围添加一个容器.

However I cannot find out how to center the navigation links so that they are total in center, not just adding a container around them.

我正在使用的示例导航条代码:.

Sample navbar code I am playing with:.

<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

推荐答案

您可以将此代码添加到CSS文件中.

You could add this code to your css file.

.nav {
  text-align: center;
}

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

这篇关于在Bootstrap 4(alpha 5)中将导航栏内容居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！