Railsで開発しているWEBソフトにBoot strap4を導入し、navでヘッダを作ろうとしています。
ドロップダウンを入れてみたのですが問題が2つ出てきました。
1. 2回クリックしないとドロップダウンメニューが開かない
一回目のクリックでは何も反応がなく、二回目のクリックでドロップダウンメニューが表示されます。これを一回目から表示されるようにしたいんです、、、
2.ドロップダウンメニューが開いた際にヘッダのレイアウトが崩れてしまう
メニューを開く前
メニューを開いた後
ドロップダウンがヘッダ内に表示されてしまって背景がびよーんと下方向に拡大されてしまいます。
これをヘッダの範囲外に表示して、ヘッダのレイアウトに影響がないようにしたいです。
やってみたこと
検証を見て表示されるCSSを見ながらいろいろ試してみましたが、改善はできませんでした。。。
下記にヘッダパーシャルのhtml,scss,gemのコードを添付します。
どうぞよろしくお願いいたします。
HTML
1<nav class="navbar navbar-fixed-top navbar-dark bg-primary"> 2 <div class="container"> 3 <a href="/" class="navbar-brand"> 4 Body-Weight App 5 </a> 6 <ul class="navbar-nav"> 7 <% if logged_in? %> 8 <li><a href="/" class="nav-link">Home</a></li> 9 <li><a href="#" class="nav-link">Help</a></li> 10 <li class="dropdown"> 11 <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-expanded="false">Account<span class="caret"></span></a> 12 <ul class="dropdown-menu" role="menu"> 13 <li><a href="#">メニュー1</a></li> 14 <li><a href="#">メニュー2</a></li> 15 </ul> 16 </li> 17 <% else %> 18 <li><a href="#" class="nav-link">Help</a></li> 19 <% end %> 20 </ul> 21 </div> 22</nav>
SCSS
1@import "bootstrap"; 2 3$main-blue:#428bca; 4$light-gray:#777777; 5 6li{ 7 list-style: none; 8} 9 10 11.navbar-nav{ 12 flex-direction: row; 13 li{ 14 margin-left: 15px; 15 } 16} 17
Ruby
1source 'https://rubygems.org' 2git_source(:github) { |repo| "https://github.com/#{repo}.git" } 3 4ruby '2.6.3' 5gem 'rails', '~> 5.2.3' 6gem 'bcrypt', '3.1.12' 7gem 'puma', '~> 3.11' 8gem 'uglifier', '>= 1.3.0' 9gem 'coffee-rails', '~> 4.2' 10gem 'turbolinks', '~> 5' 11gem 'jbuilder', '~> 2.5' 12gem 'bootsnap', '>= 1.1.0', require: false 13gem 'bootstrap', '~> 4.1.1' 14gem 'jquery-rails', '4.3.1' 15 16 17group :production do 18 gem 'pg', '0.20.0' 19 gem 'fog', '1.42' 20end 21 22group :development, :test do 23 gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] 24 gem 'sqlite3' 25end 26 27group :development do 28 gem 'web-console', '>= 3.3.0' 29 gem 'listen', '>= 3.0.5', '< 3.2' 30 gem 'spring' 31 gem 'spring-watcher-listen', '~> 2.0.0' 32end 33 34group :test do 35 gem 'capybara', '>= 2.15' 36 gem 'selenium-webdriver' 37 gem 'chromedriver-helper' 38 gem 'rails-controller-testing', '1.0.2' 39 gem 'minitest', '5.10.3' 40 gem 'minitest-reporters', '1.1.14' 41 gem 'guard', '2.13.0' 42 gem 'guard-minitest', '2.4.4' 43end 44 45gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 46 47 48gem 'faker', '1.7.3' 49gem 'carrierwave', '1.2.2' 50gem 'mini_magick', '4.7.0' 51gem 'will_paginate', '3.1.6' 52gem 'bootstrap-will_paginate', '1.0.0' 53
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/25 14:47
2019/06/25 14:49
2019/06/25 15:04
2019/06/25 15:50
2019/06/25 16:03