4

关于将 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/

我如何将品牌和列表项都居中，以便两者都居中在一行上？

编辑：

我刚刚注意到，如果您在导航栏中有一个下拉菜单（就像在您更新的答案中一样），下拉菜单真的很乱（下拉菜单根本不显示，如果它显示，表单背景就会消失）。更好的方法可能是，如果所有项目都没有居中并且有一行，那么它们应该都在一行上然后居中，类似于非响应视图，除了现在，还有第二个线。那可能吗？

4

2 回答 2

21

要使 UL 居中，您无需编写任何课程。

Bootstrap 提供了您需要的一切，只需执行以下操作：

<ul class="list-inline center-block text-center">
 // your list
</ul>
于 2014-04-10T05:26:20.050 回答
3

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

我不会说这很好，而且您可能需要在较小的屏幕上使用不同的行为，但这在演示中有效：

.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; }

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

使用响应式导航栏更新：响应式演示

@media (max-width: 979px) {
    .navbar .brand,
    .nav-collapse {
        display: block;
    }
}
于 2013-03-09T00:45:48.840 回答