Question

有几个问题关于集中Twitter引导程序的品牌或将列表项集中在导航栏中，但我还没弄明白，如何将两者都集中在一起。

以下是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-block s 。

我不会说这很好，你可能需要在较小的屏幕上使用不同的行为，但这可以在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;
    }
}

中心bootstrap的品牌和列表项

2 个答案: