2

我无法让媒体查询在引导程序中工作（使用 rails）。以下是媒体查询

    @media (min-width: 768px) {

   .center.navbar .nav, .center.navbar .nav > li {
    display:inline-block;
    float:none;
     vertical-align:top;
    width:100%;
    }

  .center .dropdown-menu {
  display: none;
  text-align:left;

   }

 .center .dropdown.open ul {

 display: block;

   }

无论屏幕大小如何，上面的媒体查询都会覆盖所有默认行为。我从@baptme 收到了一些建议（非常感谢）来解释正在发生的事情（我现在明白了），基本上是因为查询使用了两个类并且默认行为使用 1 类然后媒体查询覆盖。所以我的问题是如何让媒体查询仅在此示例中的屏幕尺寸低于 768px 时才起作用，并在没有时覆盖默认样式

然而，这是我有点困惑的地方，因为在检查 Firebug 中的元素时，默认值如下

      .center.navbar .nav, .center.navbar .nav > li {
       display: inline-block;
       float: none;
       vertical-align: top;
       }

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

任何人都可以对此有所了解，任何帮助表示赞赏，如果您想看到它的实际效果，请访问

     http://46.32.253.11/
4

1 回答 1

2

从你的例子：

这将隐藏下拉菜单，移除黑色悬停并在左侧对齐的另一个下方显示链接：

@media (max-width: 979px) {
  .navbar  .dropdown-menu {display:none}
  .navbar .nav > li a:hover { background-color:transparent}
  .center.navbar .nav, .center.navbar .nav > li {display: table;clear:both};
}

结果

于 2012-07-06T12:29:05.207 回答