0

大约一年前，@Andres Ilich 为在 Bootstrap 中居中导航栏提供了一个非常优雅的答案。 已发布答案的摘录如下：

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

然后你可以像这样定位 .center 类：

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

由于这也影响了下拉菜单，他补充说：

.center .dropdown-menu {
    text-align: left;
}

这样下拉菜单就会正常运行。

现在我面临着类似的问题。导航栏居中精美。下拉菜单效果很好。但是，当您进入平板电脑和移动视口时，移动菜单也会居中。简单地将文本向左对齐并不能解决问题，因为每个无序列表项都需要自己的行。

我一直在试图找出一种方法，我可以简单地在媒体查询中添加一个可以撤消此操作的类，但我一直无法找到解决方案。

请参阅此 jsFiddle 以了解我在说什么：http: //jsfiddle.net/persianturtle/rAYyk/2/

我的问题： 是否有一种简单的方法（<50 行代码）可以在媒体查询中撤消上述代码，以便此导航菜单将桌面视图居中并在平板电脑和手机上正常显示？

如果这不能用纯 CSS 完成，能否逐步解释 jQuery 解决方案如何工作？由于我有 h5bp，我已经链接了 jQuery 1.9.0。

4

1 回答 1

1

如果您想进行仅影响平板电脑和移动设备视口的 CSS 更改，您可以在 bootstrap-responsive.css 文件中添加您需要的 CSS 覆盖。

这是执行“响应式设计”并对平板电脑和移动视口进行样式化的@media 查询所在的位置。

@media (max-width: 979px) { 
    .center .navbar-inner {
        text-align:left !important;
    }
    .center.navbar .nav > li{
        display:block !important;
    }
}
于 2013-02-13T19:17:46.390 回答