首页  >  文章  >  web前端  >  如何在 Twitter Bootstrap 中将导航栏链接居中?

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

Susan Sarandon
Susan Sarandon原创
2024-11-01 03:11:28708浏览

How to Center Navbar Links in 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn