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

问题描述

大约一年前，@ Andres Ilich为Bootstrap中的导航栏提供了一个非常优雅的答案。

About a year ago, @Andres Ilich provided a beautifully elegant answer to centering the navigation bar in Bootstrap. An excerpt from the posted answer is below:

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

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

And then you can target the .center class like so:

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

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

Since this affected the drop down menu as well, he added this:

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

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

So that the drop down menus would behave normally.

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

Now I am facing a similar issue. The navigation bar is beautifully centered. Dropdowns work great. But, when you get into tablet and mobile viewports, the mobile menu also gets centered. Simply aligning the text to the left does not solve the issue since each unordered list item needs its own line.

我一直试图找出一种方法，我可以简单地在媒体查询中添加一个类来解除这个，但是我找不到一个解决方案。

I have been trying to figure out a way where I could simply add a class inside a media query that would undo this, but I haven't been able to find a solution.

请参阅此jsFiddle以了解我在说什么：

Refer to this jsFiddle to see what I am talking about: http://jsfiddle.net/persianturtle/rAYyk/2/

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

My question: Is there a simple way (<50 lines of code) to undo the above code inside a media query so this navigation menu would be centered desktop view and displayed as normal on tablets and phones?

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

If this cannot be done with pure CSS, can a step-by-step explanation of how a jQuery solution would work? Since I have h5bp, I already have jQuery 1.9.0 linked in.

推荐答案

如果你想改变CSS只影响平板电脑和移动视口，您可以在bootstrap-responsive.css文件中添加所需的CSS覆盖。

If you'd like to make a CSS change which only affects the tablet and mobile viewports, you can add the CSS overrides you need in the bootstrap-responsive.css file.

这是@media查询所在的位置，可执行响应式设计并为平板电脑和移动视口设置样式。

This is where the @media queries are located that perform the "responsive design" and stylize the tablet and mobile viewports.

@media (max-width: 979px) {
    .center .navbar-inner {
        text-align:left !important;
    }
    .center.navbar .nav > li{
        display:block !important;
    }
}

这篇关于如何覆盖/撤消Twitter Bootstrap的CSS类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！