ブートストラップ3 - テキストボタンに重複するナビゲーションボタン

Question

ここに問題があります。

https://jsfiddle.net/nn6ydqcw/1/

<header> 
    <nav class="navbar navbar-inverse" role="navigation "> 
     <div class="col-md-12" style="height:150px;background-color:#FFFFFF"> 
      <div class="col-md-3" ><a href="index"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></a></div> 
      <div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div> 
     </div> 
     <div class="col-md-12"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="home">HOME</a></li> 
        <li><a href="contact">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

私は上記のコードでブートストラップ3を使用していますが、それはデスクトップ/ラップトップなどで正常に動作します。しかし、私は携帯電話やリサイズのブラウザでそれを見たときに小さな画面で見て、それが中に表示されます次のシーケンス。だから、小さな画面では、トグルアイコンをクリックすると、ナビゲーションボタンがタグ行にオーバーラップします。

1. ロゴ
2. ナビゲーショントグルアイコン
3. テキストベースのタグライン

私がやりたいので、彼らは順序を次のように表示されます。だから私は小さな画面でそれらを参照して、ナビゲーションボタンは、タグ行と重複してはいけません。

1. ロゴ
2. テキストベースのタグライン
3. トグルナビゲーショントグルアイコン

私は必要な結果を得ることができる方法を教えてください。

Answer 1

高さに矛盾しているstyle = "height：150px; background-color：#FFFFFF"を確認してください：150px;プッシュを使ってブートストラップをプルする必要があると思います。

Answer 2

次のようにコードを更新します。

CSS：

 @media only screen and (max-width: 768px) { 
    body { 
    background-color: orange; //FOR TESTING PURPOSE 
    } 

    #tagstyle { 
     position: relative; 
     left: 220px; 
     top: -200px; 
     padding: 0px; 
     width: 60%;  
     } 
} 

HTML： [以下に示すようにIDを追加]

<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1> 

デスクトップビュー： を

モバイルビュー：