引導響應 - 如何重新定義/覆蓋CSS類

我用引導盡我的手在我的第一個響應的應用程序。到現在爲止還挺好。但我想針對谷歌Nexus 7，默認情況下，它似乎被歸類爲基於以下的CSS「電話」我在引導-responsive.css看到：

@media (max-width: 767px) { 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
}

在某一頁面，我有以下邏輯：

<div class="row-fluid visible-desktop">      
     some html here for desktop version only 
     display big buttons 
</div> 

<div class="row-fluid visible-tablet">     
     some html here for ipads 
     display medium buttons 
</div> 

<div class="row-fluid visible-phone">      
     display divs, not buttons. 
</div>

問題

目前，在縱向模式下的Nexus 7是撿了手機的部分，我不明白爲什麼？我的另一個問題是如何覆蓋或重新定義bootstrap的「電話」媒體查詢在我自己的自定義CSS？（請參見下面的說明，以瞭解我到目前爲止已經試過）

什麼我試過到目前爲止：

作爲測試，我使用Nexus去resizemybrowser.com和它說，縱向模式下的當前內容爲980x1294。我想我不明白爲什麼如果尺寸真的很高，爲什麼聯結會將我的手機部分延長？也許我誤解了resizemybrowser.com網站顯示的信息。

我也一直在玩弄我的custom.css，並發現似乎正確的目標，我的聯繫瀏覽器尺寸：

/* Google Nexus 7 Portrait */ 
@media (min-width:500px) and (max-width: 720px) and (orientation:portrait){ 
    body{ 
     background-color: green; 
    } 
}

我用的Nexus 7，iPod的5測試，iPad和三星Galaxy 3以及上面的媒體查詢，唯一一款能夠吸引綠色背景的設備就是聯網......這正是我想要的。所以我在想，我可以在bootstrap-responsive中重新定義媒體查詢，如下所示：（基本上只是將瀏覽器的最大大小從767改爲500px）。

@media (max-width: 500px) { 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
}

的想法是定義手機較小的瀏覽器的大小...然後我會創建一個新的媒體查詢，將針對小片。但似乎通過在我的custom.css中創建上述媒體查詢不會替換/覆蓋bootstrap中的一個。我不想直接更改bootstrap中的代碼。你能告訴我我做錯了什麼嗎？

謝謝。

編輯1：

這是我如何加載兩個css文件：

<link href="<?php echo base_url('assets/css/bootstrap-responsive.css')?>" rel="stylesheet">  

    <link href="<?php echo base_url('assets/css/custom.css')?>" rel="stylesheet">

來源

2013-08-07 mark li

谷歌下一個媒體的CSS在手機的CSS下面？ – Charles380

Charles380，是的谷歌nexus是我在文件中定義的最後一個css東西......這是否有所作爲？ –

我有同樣的問題，我認爲這是通過引導js不是CSS強制風格，因爲我能夠覆蓋大多數其他CSS像按鈕，旋轉木馬...等和抱歉，但我沒有發現任何解決方案，但尚未 – Roshdy

它看起來像你正確無所不爲。

問題是您的CSS文件在引導文件之前被調用，這就是爲什麼它沒有優先於它。

將您的自定義樣式表移動到頁眉底部，看看是否讓您的樣式表優先於其他樣式表。

來源

2013-08-07 18:00:27

avalera，我加載我的自定義表後...請檢查部分編輯1在我的文章...謝謝！ –

嗯...你有這樣的生活嗎？ –

不...還沒有。抱歉。 –

引導響應 - 如何重新定義/覆蓋CSS類

回答

相關問題