2017-03-14 12 views
0

おそらく、私は何かを理解していない、または理解していないかもしれませんが、私は可能な限りすべて試してみて、同じ結果を得ました。シンプルなブートストラップnavbarがモバイルで崩壊しない

私の問題

私は単に応答ナビゲーションバーのためexample from w3schoolsを取ったポイントに私のページをダウン易しく書き直されています。ブラウザウィンドウのサイズを変更すると、Navbarが崩壊します。 In my JSFIDDLEナビバが崩壊しますが、私はモバイルデバイスに行くとすぐにナビバーが崩壊していません ...私はここで間違っていますか?

BROWSERそれが必要として働いてサイズを変更

enter image description here

ブラウザのサイズを変更!

モバイルデバイス

enter image description here

モバイルデバイスが動作しない、なぜ?私はここで間違っていますか?ここでは、あなたのコード内のビューポートのタグが欠落しているようだlink to my JSFIDDLE

<head> 
    <script 
     src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" > 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" </script> 
</head> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 
+0

そのモバイルブラウザの幅はどれくらいですか?おそらく、その動作の理由は、 'navbar'があなたのモバイルデバイスでまだブレークポイントに達していないということです。 – Swellar

答えて

3

でダブルあなたのコードをチェックして、次のコードを追加していない場合は、可能なビューポートタグを持っていることを確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

その小さい幅にリサイズするときあなたのJSFiddle例が正常に動作している

+1

NOOOO ...今は愚かで、2時間のデバッグに費やしています。 DOH!時間が切れると受け入れます。ありがとうございました! – Marilee

0

してみてください、この1:

<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, manimum-scale=1.0, maximum-scale=1.0" /> 
関連する問題