html - 如何使 Bootstrap 导航项居中

Question

我似乎无法弄清楚如何将导航项居中。我可以将它们放在左边或右边，但不能放在中间。有没有简单的解决方法？

  <!-- Navigation -->
  <div class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Mobile navigation button --> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
      <!-- Navigation items -->
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
          <li><a href="#">OUR PRODUCTS</a></li>
          <li class="active"><a href="#">ABOUT</a></li>
          <li><a href="#">OUR TEAM</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>  
    </div>
  </div>

我已经尝试了一些东西，但它们有点草率，并导致移动版本出现一些问题。我正在寻找更合适的东西。

Answer 1

1) 使用<ul class="nav nav-justified" ... 用于菜单容器。

2) 看看这个codepen来源:

.navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar-nav > li
{
    float: none;
    display: inline-block;
}

3) 阅读答案 right there

有 3 种不同的方法可以做某事，如您所愿，选择一种。

你很容易找到你的答案，下次请尝试一个人做吧，兄弟。