使用Rails引导媒体查询

我想在我的Rails应用程序中使用以下媒体查询。使用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，我将我的代码放入覆盖样式表中，但是我不确定在哪里放置媒体查询。我试过主样式表和覆盖样式表，但没有读它。我敢肯定，我在这里缺少一个基本的规则，将不胜感激，如果任何人都可以在正确的方向

来源

2012-07-05 Richlewis

Chrome是伟大的CSS优先调试点我。

我已经把你的CSS在<style>标签之前</head>

并补充.center到.navbar

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

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

您的css的位置不是问题，因为.center.navbar包含2个类别，并且默认行为仅使用1个类别，所以优先考虑您的覆盖。

debug css with chrome

确保类.center到.navbar。

注：

对于我来说，你的问题3个可能的原因。

的.center丢失（这就是为什么我问你，以确保.center存在）
缓存提供的CSS，你需要清除Web浏览器的缓存。
媒体查询是不存在的样式表

来源

2012-07-05 19:25:39 baptme

对不起@baptme didnt相当了解的最后一位，非常感谢您的帮助，虽然再次（你可以用镀铬来证明这一点调试）。那么你说什么是因为媒体查询比它覆盖其他所有内容的默认行为更具特异性？ – Richlewis 2012-07-05 20:00:30

如果http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector定义，如果两个元素具有相同优先级，最后宣布获胜@Richlewis CSS的优先级。因为你的CSS有一个使用的类，它总是会有默认行为的边缘。因此，CSS的位置不成问题。 – baptme 2012-07-05 20:17:17

@Richlewis我的荣幸 – baptme 2012-07-05 20:20:51

使用Rails引导媒体查询

回答

相关问题