1

我想在我的 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 CSS，我会将我的代码放在覆盖样式表中，但是我不确定在哪里放置媒体查询。我已经尝试了主样式表和覆盖样式表，但它没有阅读它。我确定我在这里遗漏了一条基本规则，如果有人能指出我正确的方向，我将不胜感激

4

1 回答 1

1

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

我之前已将您的 CSS 放在<style>标签中</head>

并添加.center到.navbar

然后只需右键单击.navbar并单击Inspect Element

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

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

用 chrome 调试 css

确保上课.center。.navbar

笔记：

对我来说，您的问题有 3 个可能的原因。

  • 失踪了.center（这就是为什么我要求你确保.center存在）
  • 缓存服务于 CSS，您需要清除 Web 浏览器的缓存。
  • 样式表中不存在媒体查询（您可以使用 chrome 进行调试以证明这一点）
于 2012-07-05T19:25:39.793 回答