ナビゲーションメニューのブートストラップフォームコントロールのサイズが変更されていないと思われますcorreclty

Question

私はブートストラップでナビゲーションメニューを作成しましたが、このナビゲーションではメニューの中央に検索フォームを配置しました。次に、デスクトップデバイスでは幅を500ピクセルに調整し、300ピクセル幅に設定したタブレットデバイスでは幅を調整しました。ここで

は、CSSコードです：

@media (min-width: 768px) { 
    .navbar-nav.navbar-center { 
     position: absolute; 
     left: 50%; 
     transform: translatex(-50%); 
    } 
    .form-group input{ 
     width:500px !important; 
    } 
} 
@media (min-width: 499px) { 
    .form-group input{ 
     width:300px !important; 
    } 
} 
@media (min-width: 399px) { 
    .form-group input{ 
     width:200px !important; 
    } 
} 

そして、ここではナビゲーションのHTMLコードです：

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Brand</a> 
      </div> 

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-center"> 
        <form class="navbar-form"> 
         <button type="submit" class="btn btn-default">Submit</button> 
         <div class="form-group"> 
          <input type="text" class="form-control" placeholder="Search"> 
         </div> 
        </form> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Link</a></li> 
        <li class="log"><button type="button" class="btn btn-default sign">Default</button></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

問題は、何とか200pxのでデスクトップまだデバイス銘柄の検索フォームの入力の大きさ!!

この問題を処理する方法が分かっている場合は、教えてください。 （あなたはこの画像で見ることができるように）基本的に私が望むすべてはこの種の問題を逃れるためにあるかもしれないがためのように、各CSSメディアクエリは、以前のものを上書きしている

Answer 1

...小型のデバイスで発生していますの幅が398pxより大きい任意の幅は200pxになります。この問題を解決するには、あなただけのクエリの順序を逆にする必要があります。

@media (min-width: 399px) { 
    .form-group input{ 
     width:200px !important; 
    } 
} 
@media (min-width: 499px) { 
    .form-group input{ 
     width:300px !important; 
    } 
} 
@media (min-width: 768px) { 
    .navbar-nav.navbar-center { 
     position: absolute; 
     left: 50%; 
     transform: translatex(-50%); 
    } 
    .form-group input{ 
     width:500px !important; 
    } 
} 

しかし、あなたはあまりにも広いあなたがcalc()のようなものを持つ方が良いかもしれないというの入力を避けたい場合。