私はレール5でブートストラップ4を使用しており、折りたたみ式のナビゲーションバーを構築しようとしています:折りたたみと機能はうまく機能しますが、何らかの理由で折り畳まれたウェブサイト上の例では、与えた場合ブートストラップ4 navbarは中規模または小規模のデバイスで極端に薄い
:ナビゲーションバーは、本当に小さいだけでナビゲーションバーを越えて
を、鉱山でのテキストサイズもはるかに小さいです。私は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>
任意の助けもいただければ幸いです。ありがとう!マイケル・コーカーへ
いくつかのコードを挿入できますか?また、あなたのスクリーンショットが携帯電話や携帯端末にあると仮定して、コンテンツをモバイルデバイスに拡大するビューポートのメタタグはありますか? '' –
ああ、私は自分のコードを含めていないとは思えません。 1秒 –
私の質問をコードで更新しました - 私はそれについて聞いていませんでした。それを調べます –