Bootstrap 3 Navbar Elements Stacking - navbar-brand not scaling

Question

私のサイトのnavbarブランドのテキストを反応的にするために、私は画面のサイズが小さくなるにつれて小さくしたいと考えています。現時点では、私のブランドテキストはモバイルでサイズが変わることはありません。これは、navbarブランド上でnavbarリンクの醜いスタッキングを作成します。私は入れてみました

@media (max-width: 400px) { 
.navbar-brand { 
    font-size: 14px; 
} 
} 

私のCSSでは、しかし、役に立たない。私は行方不明の何か簡単ですか？ここで

は私が何を意味するかをお見せするために、スクリーンショットです：

Medium-sized screens

はHTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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="index.html">Sample Company Law Group, Inc.</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="attorneys.html">Attorneys</a> 
       </li> 
       <li> 
       <a href="practice-areas.html">Practice Areas</a> 
       </li> 
       <li> 
       <a href="references.html">References</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

https://jsfiddle.net/frzbpkjk/

Answer 1

まず、私はあなたのCSSをテストし、それが動作します。あなたは、このリンクに取り組んで例を見ることができます：

http://codepen.io/eMineiro/pen/Kzjymp

<div class="navbar-brand"> 
    <p>Test</p> 
</div> 

1）の問題は、あなたのCSSコードである可能性があります。あなたのコードにオーバーロードされている別の "font-size"があるかどうか確認してください。

2）最も簡単な方法が起こっているかを確認するには、あなたのブラウザの開発者ツールを開き、メディア画面が未満400ピクセル

どれ例は、以下のコードをオーバーライドすることができますときに呼び出しているどのようなスタイルのブラウザをチェックすることです：

/* Any media with max-width greater than 400px could override your code */ 
@media (max-width: 500px) { 
.navbar-brand { 
    font-size: XXpx; 
} 
} 
/* Any media with min-width lower than 400px could override your code */ 
@media (min-width: 200px) { 
.navbar-brand { 
    font-size: XXpx; 
} 
} 
/* Any media with max-width greater than 400px could override your code */ 
@media (max-width: 500px) { 
.navbar-brand { 
    font-size: XXpx; 
} 
} 
/* Any media with min-width lower than 400px could override your code and max-width greater than 400px */ 
@media (min-width: 200px) and (max-width: 500px) { 
.navbar-brand { 
    font-size: XXpx; 
} 
}