无法中心Bootstrap导航栏

时间:2013-11-14 18:36:28

标签: html css twitter-bootstrap center navigationbar

我试图将此作为中心: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 

我有这个:i.imgur.com/JVh05N1.png

并希望如此:(来自photoshop的结果) http://i.imgur.com/B3UcOU9.png

2 个答案:

答案 0 :(得分:1)

尝试将.navbar-nav的显示值更改为内联块,然后在其父级上应用text-align以控制对齐。

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

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

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

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

答案 1 :(得分:0)

使用bootstrap class =“ justify-content-center”