如何在 Twitter Bootstrap 中将导航栏链接居中？

修改 Twitter Bootstrap 的导航栏

Twitter Bootstrap 导航栏是一个多功能组件，可以自定义以适应不同的布局。本文演示了如何将导航栏中的链接居中，解决常见的用户请求。

问题：导航栏中的链接未对齐

最初，导航栏中的链接是左对齐的，尽管中心对齐的预期结果。尝试使用预先存在的 CSS 规则没有产生所需的结果。

解决方案：内联显示和居中文本对齐

要使导航栏链接居中，我们需要设置链接到内联块和导航栏容器的文本对齐属性居中。以下是修改后的 CSS：

<code class="css">.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner {
    text-align: center;
}</code>

有针对性修改的自定义类

为了避免对其他导航部分进行不必要的修改，建议创建一个针对所需导航栏菜单的自定义类。例如，我们可以创建一个名为“center”的类：

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

然后，我们可以在 CSS 中定位该类：

<code class="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;
}</code>

子菜单对齐

将主链接居中后，如果子菜单项受到更改的影响，则可能需要将子菜单项重新向左对齐。这可以通过附加 CSS 来实现：

<code class="css">.center .dropdown-menu {
    text-align: left;
}</code>

实时演示

可以在此处找到此解决方案的实时演示：http://jsfiddle.net/C7LWm/7/。

以上是如何在 Twitter Bootstrap 中将导航栏链接居中？的详细内容。更多信息请关注PHP中文网其他相关文章！