使用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引導媒體查詢

回答

相關問題