css - 居中元素，导航

Question

我将第一次使用 Bootstrap 创建响应式设计，只需设置导航元素。

但这是我的问题:导航容器没有出现在页面中心。

请看 1.jpg 这是我到目前为止的。看我要的2.jpg![这是我目前为止][1]

虽然如果我使用我自己的包装器，如 .mainContainer，那会是我想要的。但想知道是否有可能通过 bootstrap css 达到预期的效果？

我尝试了几种方法，例如文本居中对齐等... ![这个我想要][2]

这是我的代码:

<div class="container-fluid">   
    <div class="row-fluid">
        <nav>            
            <div class="navbar-inner" >        
                <ul class="nav nav-pills">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Workshops</a></li>
                    <li><a href="#">Entertainment</a></li>
                    <li><a href="#">Contact Us</a></li>      
                </ul>
            </div>
        </nav>
    </div>  
</div>

我也尝试了 offset span 但没有得到我想要的。如果我使用 .container 类很好，但想使用 .container-fluid 来实现。让我知道如何解决这个问题。

Answer 1

检查一下:http://bootply.com/73827

您可以使用以下方法使菜单居中:

nav {
    text-align: center;
}
.navbar-inner {
    display: inline-block; /* makes element respond to parent's text-align */
}