中心 bootstrap 的品牌和列表项

Question

关于将 Twitter bootstrap 的品牌居中或将导航栏中的列表项居中有几个问题，但我还没有弄清楚如何将两者居中。

这是一个示例，在Modify twitter bootstrap navbar 中使用，但它只居中列表项，而不是品牌。 这是 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>

Answer 2

您需要居中的不是<li>，而是它们的容器。子元素是否浮动无关紧要，只有您真正想要居中的父元素需要是inline-blocks。

我不会说它很好，您可能需要在较小的屏幕上使用不同的行为，但这适用于the demo：

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

确保您的选择器足够具体，只针对您想要的元素（即不是折叠按钮）

---

更新响应式导航栏：Responsive demo

@media (max-width: 979px) {
    .navbar .brand,
    .nav-collapse {
        display: block;
    }
}