使用Rails在Bootstrap中进行媒体查询

Question

我想在我的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;

   }

我使用bootstrap作为前端的框架。通常，如果我想覆盖一段Bootstrap CSS，我将我的代码放在覆盖样式表中，但是我不知道在哪里放置媒体查询。我已经尝试了主样式表和覆盖样式表，但它没有阅读它。我确信我在这里错过了一条基本规则，如果有人能指出我正确的方向，我会很感激

Answer 1

Chrome非常适合CSS优先级调试。

我已将CSS放在<style>

之前的</head>标记中

并将.center添加到.navbar

然后右键点击.navbar，然后点击Inspect Element

您可以在左下角的代码中导航，如果点击.nav，您可以在右下角看到应用于您选择的CSS（您将识别媒体查询）。

你的css的位置不是问题，优先考虑你的覆盖，因为.center.navbar包括2个类，默认行为只使用1个类。

确保课程.center为.navbar。

注意：

对我来说，问题可能有三个原因。

• .center缺失（这就是我要求您确保.center存在的原因）
• 缓存为css提供服务，您需要清除Web浏览器的缓存。
• 样式表中不存在媒体查询（您可以使用chrome进行调试以证明它）