navドロップダウンカラーcssがモバイルデバイスやスモールスクリーンデバイスで動作しない

Question

ブートストラップナビバーのドロップダウンメニューに背景を追加しました。大きなスクリーンデバイスでは問題なく動作しますが、携帯電話のような小さな画面デバイスでは、メニューが自分のコンテンツと重複しています

.nav-dropdown { 
    background: #fff; 
    @include border-radius($popover); 
    box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35); 
    border: none; 
    top: 134%; 

とにかく、小さな画面のデバイスでも同じようにドロップダウンの背景を作ることができます。

編集

私はチャンドラクマーの答えをしようとしたが、それは働いていません：

@media only screen and (min-width : 480px) { 

    body { 
    padding-top: 67px; 
    } 
    .navbar-header { 
    border-bottom: none; 
    } 
    .navbar-fixed-top { 
    position: fixed; 
    } 
    nav.navbar { 
    padding: 5px 0; 
    .filter-links { 
     margin-top: 16px; 
     margin-left: 0; 
    } 
    .nav-dropdown { 
    background: #fff; 
} 
    #logo { 
     width: 138px; 
     margin-left: 0; 
    } 
    .new-post-button { 
     display: inline-flex; 
    } 
    } 

デスクトップビュー：

モバイルビューを右今私が欲しいですデスクトップビューとまったく同じです。

Answer 1

私はメディアクエリを使用して、例えば

を微調整したいクラスを追加することをお勧め：ブートストラップ3デフォルトのメディアクエリの

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    .nav-dropdown { 
     background: #fff; 
    } 
} 

あなたはそれをhere