rails / bootstrap中的媒体查询

Question

我无法让媒体查询在bootstrap中工作（使用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/

Answer 1

从你的例子：

这会隐藏下拉列表，删除黑色悬停并在左侧对齐的下方显示链接：

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