2016-09-19 9 views
0

私は「〜> 3.3.6」、宝石「ブートストラップ-SASS」がレールを使用していますし、これは私のhtmlです:私は電話で私のページを訪問したときに私のブートストラップナビバーが携帯電話で動作しなかったのはなぜですか?

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar"> 
     <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 brand-name" href="#">Brand<br><p>MUSIC FESTIVAL</p></a> 
    </div> 
    <div class="collapse navbar-collapse" id="navigationbar"> 
     <ul class="nav navbar-nav"> 
     <li><a class="sections" href="#">LINE-UP</a></li> 
     <li><a class="sections" href="#">BOLETOS</a></li> 
     <li><a class="sections" href="#">FAQ'S</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a id="date-festival">test</a>/li> 
     </ul> 
    </div> 
    </div> 
</nav>` 

問題は、ナビゲーションバーはまだありますデスクトップ版。 ps:jqueryの後に私のブートストラップが既にあります。

+1

あなたがメタビューポートタグを追加しました '<メタ名=「ビューポート」コンテンツ="幅=装置幅、ユーザースケーラブルなし=、初期スケール= 1.0、最大スケール= 1.0、最小スケール= 1.0 "/>'? – Alex

+0

@Alexありがとう!それは働く。 – imjustaguy

+0

素晴らしいですが、問題ありません。モバイル用に作業するときは、Meta Viewportを使用することを忘れないでください。 – Alex

答えて

1

あなたはheadセクションにメタタグを追加するべきである:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
関連する問題