如何将链接置于 Twitter Bootstrap 导航栏中的中心？

使用集中链接自定义 Twitter Bootstrap 的导航栏

Twitter Bootstrap 提供了一个用于构建响应式网页设计的强大框架，包括多功能导航栏组件。但是，如果您想偏离导航栏中默认的左对齐链接，则需要进行一些 CSS 调整。

解决方案 1：使用 .tabs 和 .pills

在之前的文章中，您尝试使用 .tabs 和 .pills 将链接居中。但是，这种方法不起作用，因为 Bootstrap 将这些样式专门应用于导航选项卡和分页控件，而不是主导航栏。

解决方案 2：自定义 .nav 和 .navbar-inner 类

为了集中导航栏链接，正确的方法是修改包含链接的 .nav 和设置导航栏整体对齐方式的 .navbar-inner 的样式。以下是更新后的 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>

此 CSS 将覆盖默认样式，并使导航栏链接水平居中显示。

使用自定义类进行目标定制

为了避免影响页面上的其他导航元素，您可以为目标导航栏创建自定义类。例如：

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

这些修改将成功地将导航栏链接居中，而不会影响其他导航元素的功能或样式。

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