2017-01-13 3 views
0

私はレール5でブートストラップ4を使用しており、折りたたみ式のナビゲーションバーを構築しようとしています:折りたたみと機能はうまく機能しますが、何らかの理由で折り畳まれたウェブサイト上の例では、与えた場合enter image description hereブートストラップ4 navbarは中規模または小規模のデバイスで極端に薄い

:ナビゲーションバーは、本当に小さいだけでナビゲーションバーを越えて enter image description here

を、鉱山でのテキストサイズもはるかに小さいです。私はnavbarに付けられたサイジングの点で特別なCSSを持っていないので、なぜそれがデフォルトのサイズよりもかなり小さいのか混乱しています。

_navigationbar.html.erb:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
    <!-- Brand --> 
    <!-- <a class="navbar-brand" href="#">brand</a>--> 

    <!-- Links --> 
    <div id="myNavbar"> 
     <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
     <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
      <ul class="nav nav-pills navbar-nav" id="nav-colors"> 
       <li class="nav-item"><a class="nav-link" href="#home">Home</a></li> 
       <li class="nav-item"><a class="nav-link" href="#about">About</a></li> 
       <li class="nav-item"><a class="nav-link" href="#features">Features</a></li> 
       <li class="nav-item"><a class="nav-link" href="#contact">Contact Us</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

がapplication.html.erb:

<!DOCTYPE html> 
<html> 
<head> 
    <title>League Builders</title> 
    <%= csrf_meta_tags %> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
</head> 

<body> 
    <%= render 'layouts/navigationbar' %> 
    <div class="container-fluid"> 
     <%= yield %> 
    </div> 
</body> 
</html> 

任意の助けもいただければ幸いです。ありがとう!マイケル・コーカーへ

+0

いくつかのコードを挿入できますか?また、あなたのスクリーンショットが携帯電話や携帯端末にあると仮定して、コンテンツをモバイルデバイスに拡大するビューポートのメタタグはありますか? '' –

+0

ああ、私は自分のコードを含めていないとは思えません。 1秒 –

+0

私の質問をコードで更新しました - 私はそれについて聞いていませんでした。それを調べます –

答えて

0

スクリーンショットからは、あなたがモバイルデバイスになっているように見えますが、ブートストラップナビだけでなく、すべてが本当に小さくなっています。通常、メタビューポートのタグが見つからないため、小さなデバイスでコンテンツを拡大することができます。これをあなたのサイトの<head>に追加してみてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+0

ありがとう!あなたの助けを本当に感謝します。 –

+0

@NathanLauer私の喜び! –

0

おかげで、この問題は本当に簡単に修正されました:application.html.erbのヘッド部に

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

、そしてそれはすべて自分自身を解決:私は単に行を追加しました。

+0

答えとして受け入れる場合は、実際に回答を追加します。 –

+0

先に、私はそれを受け入れるでしょう。私の投票が見られるほどの評判はまだありませんが、私はまだそれを受け入れることができます –

関連する問題