Question

bootstrap导航栏居中

http://horizon-robotics.com/index_cn.html
用bootstrap框架，写一个导航栏，想像上面的网站那样居中，但是无论怎么叠加css都无法设置居中，看了一下是navbar-nav这个样式.navbar-nav>li{float:left}，具体可以看bootstrap.min.css里的，我不知道怎么改了，请教大神。我的代码是这样的

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="text-align: center">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<span style="color: white">test</span>
</ul>
</div>

</nav>

Answer 1

这个应该很简单吧，用栅格就可以了。
整个导航栏的div看做一个整体，里面的菜单项的class加上col-xs-3之类的，比如4个菜单就是col-xs-3，6个就是col-xs-2，肯定就均匀分布并且文字居中了。

追问

不能直接让它居中吗？我看我给的那个例子就没有用栅栏但是也能居中？我就想知道我给的那个例子它是怎么实现的

Answer 2

<div class="navbar navbar-default">
    <div style="width:200px; margin:0 auto;"><!--宽度设置你的内容的宽度-->
        <ul class="nav navbar-nav">
            <li><a href="#">文字1</a></li>
            <li><a href="#">文字2</a></li>
            <li><a href="#">文字3</a></li>
        </ul>
    </div>
</div>