首页 >web前端 >css教程 >如何在 Twitter Bootstrap 导航栏中居中导航链接?

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

DDD
DDD原创
2024-11-01 09:26:021091浏览

How to Center Navigation Links in Twitter Bootstrap Navbar?

将 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>

替代方法

要保留 Bootstrap 默认值并定位特定的导航栏菜单,请创建一个自定义类并将其应用到导航栏容器:

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

然后,将 .center 类作为目标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>

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

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