大约一年前,@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;
}
以便下拉菜单正常运行。
现在我遇到了类似的问题。导航栏居中。下拉菜单效果很好。但是,当您进入平板电脑和移动视口(viewport)时,移动菜单也会居中。简单地将文本左对齐并不能解决问题,因为每个无序列表项都需要自己的行。
我一直在尝试找出一种方法,我可以简单地在媒体查询中添加一个类来撤消此操作,但我一直无法找到解决方案。
引用这个 jsFiddle 看看我在说什么:http://jsfiddle.net/persianturtle/rAYyk/2/
我的问题:有没有一种简单的方法(<50 行代码)可以撤消媒体查询中的上述代码,以便此导航菜单居中桌面 View 并在平板电脑和平板电脑上正常显示电话?
如果这不能用纯 CSS 来完成,是否可以逐步解释 jQuery 解决方案如何工作?因为我有 h5bp,所以我已经链接了 jQuery 1.9.0。
最佳答案
如果您想更改仅影响平板电脑和移动视口(viewport)的 CSS,您可以在 bootstrap-responsive.css 文件中添加所需的 CSS 覆盖。
这是执行“响应式设计”并对平板电脑和移动视口(viewport)进行样式化的@media 查询所在的位置。
@media (max-width: 979px) {
.center .navbar-inner {
text-align:left !important;
}
.center.navbar .nav > li{
display:block !important;
}
}
关于javascript - 如何覆盖/撤消 Twitter Bootstrap 的 CSS 类属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14861175/