如何覆盖/撤消Twitter Bootstrap的CSS类属性

时间:2013-02-13 19:12:43

标签: javascript jquery css twitter-bootstrap

大约一年前,@ Andres Ilich为Bootstrap中的导航栏提供了一个非常优雅的答案。 An excerpt from the posted answer is below:

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

我的问题:是否有一种简单的方法(&lt; 50行代码)来撤消媒体查询中的上述代码,因此此导航菜单将位于桌面视图的中心,并在平板电脑上正常显示和手机?

如果使用纯CSS无法做到这一点,可以逐步解释jQuery解决方案的工作原理吗?由于我有h5bp,我已经连接了jQuery 1.9.0。

1 个答案:

答案 0 :(得分: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;
    }
}