Question

我将首次使用Bootstrap创建响应式设计，只需设置nav元素即可。

但这是我的问题：导航容器不是页面的中心。

请参阅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>

我也尝试了偏移范围，但没有得到我想要的。如果我使用.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 */
}

中心元素，导航

1 个答案: