html - 无法居中 Bootstrap 导航栏

Question

我试图以此为中心：http: //jsfiddle.net/MikeStardust/hwhS5/导航栏但没有运气......

中心是指在导航中心的一行中对齐的元素...查找了一些解决方案，但没有一个有效，导致中心对齐的导航栏，每行一个元素。

Bar html：（jsfiddle上的css和html）

 <div class="navbar navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
              data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="http://chaoticunited.com/forums">Forums</a></li>
        <li><a href="servers.html">Servers</a></li>
        <li><a href="help.html">Help Center</a></li>
        <li><a href="#" data-toggle="modal" data-target="#vote">Vote</a></li>
        <li><a href="#">Donate</a></li>
      </ul>
    </div><!-- /.nav-collapse -->
  </div><!-- /.navbar 

我有这个：

并且想要这个：（来自photoshop的结果）

Answer 1

尝试将显示值更改.navbar-nav为 inline-block，然后text-align在其父级上应用以控制对齐。

text-align如果您需要更改移动视图对齐方式，您可以在该断点处重新应用。

.navbar-nav {
    display: inline-block;
}

.navbar-default {
    text-align: center;
}

示例：http: //jsfiddle.net/hwhS5/2/

Answer 2

使用引导类="justify-content-center"