中心bootstrap的品牌和列表项

Question

关于集中Twitter bootstrap品牌或将列表项集中在导航栏中有几个问题,但我还没弄明白,如何将两者都集中在一起.

这是一个示例,用于修改twitter bootstrap导航栏,但它只是列表项目的中心,而不是品牌.这是HTML的结构:

<div class="navbar navbar-fixed-top center">
     <div class="navbar-inner">
        ....
     </div>
</div>

而CSS:

.center.navbar .nav,
.center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

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

这是一个现场演示:http://jsfiddle.net/C7LWm/

我如何将品牌和列表项集中在一起,以便两者都集中在一条线上？

编辑:

我刚刚注意到,如果你在导航栏中有一个下拉菜单(比如你更新的答案),下拉列表就会搞砸了(下拉列表根本没有显示,如果显示,表单背景就会消失).一个更好的方法可能是,如果所有项目都没有居中并且有一条线,而是它们都应该在一条线上然后居中,类似于非响应视图,除了现在,还有一秒线.那可能吗？

Answer 1

要使UL居中,您不需要编写任何类别.

Bootstrap提供您需要的一切,只需执行以下操作:

<ul class="list-inline center-block text-center">
 // your list
</ul>