在rails/bootstrap中的媒體查詢

我無法讓媒體查詢在bootstrap（使用rails）中工作。下面是媒體查詢在rails/bootstrap中的媒體查詢

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

    }

以上媒體查詢是壓倒一切的默認行爲無論什麼屏幕尺寸is.I從@baptme收到了一些建議（非常感謝）來解釋所發生的事情（我現在明白了），基本上是因爲查詢使用了兩個類，並且默認行爲使用了1個類，所以媒體查詢將覆蓋。所以我的問題是，如何讓媒體查詢只在屏幕尺寸小於768px的情況下工作，而不是在這個例子中覆蓋默認的樣式

但是，這是我有點困惑，因爲當檢查中的元素螢火蟲的默認設置如下所示

 .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/

來源

2012-07-06 Richlewis

http://46.32.253.11/我認識你必須使用@media（min-width：980px），因爲您使用bootstrap-responsive.css – baptme 2012-07-06 11:35:48

再次@baptme，好吧，這樣navabr就可以在桌面全屏上顯示，當它響應的導航欄按鈕生效時，那就是navbar獲取messy.im確定你已經注意到了..我試圖實現的是，當按下導航欄按鈕時，所有鏈接都對齊到頁面的左側或中間，沒有下拉鍊接顯示，當鏈接被點擊下拉將顯示 – Richlewis 2012-07-06 11:50:59

目前鏈接傳播不均勻，所有下拉菜單顯示 – Richlewis 2012-07-06 11:51:32

從你的例子：

這將隱藏下拉，取出黑色懸停並顯示一個鏈接其他靠左對齊下：照看

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

result

來源

2012-07-06 12:29:05 baptme

非常感謝@baptme，足夠讓我感到滿意，我想這可以放在我的application.css文件中的rails？或者這仍然需要進入bootstrap.override.css – Richlewis 2012-07-06 12:45:35

@Richlewis boostrap.override.css將罰款，只要它是在bootstrap.css後 – baptme 2012-07-06 13:11:52

再次感謝，虐待讓你知道它是怎麼回事 – Richlewis 2012-07-06 14:54:51

在rails/bootstrap中的媒體查詢

回答

相關問題