Q&A
「styles.css」に記述があるならそれも追記してください。
問題点
１、bootstrap4でリンクボタンが動かない。
２、colはあわせて12（3,6,3）用意しているが、右側に謎のスペースがある。
詳細
１、該当箇所のコードで、ドロップダウンの方（２つめのクラス）ではページ遷移できるが１つ目のクラスではページ遷移ができない。文字は青色ですが、カーソルをあてても押しても何の反応もない状態となっている。
ナビゲーションとドロップダウンはページ遷移が起こるが、それ以外では起こらない。
2、写真のとおり、右側になぜかスペースがある。
該当のソースコード
該当箇所
<div class="col-md-3 d-none d-md-inline-block flex-column border-left"> <a class="btn btn-link" href="url">ア</a> <a class="btn btn-link" href="url">レ</a> <a class="btn btn-link" href="url">ｄ</a> </div> <div class="dropdown d-block d-md-none"> <button class="dropdown-toggle btn btn-white" data-toggle="dropdown">ランキング</button> <div class="dropdown-menu"> <a class="dropdown-item" href="url">ア</a> <a class="dropdown-item" href="url">レ</a> <a class="dropdown-item" href="url">ｄ</a> </div> </div>
全体図
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <title>DiscoverMusic</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"> <nav class="navbar navbar-light navbar-expand-md fixed-top"> <button class="navbar-toggler" data-toggle="collapse" data-target="#Content"> <span class="navbar-toggler-icon"></span> </button> <div id="Content" class="collapse navbar-collapse"> <ul class="navbar-nav flex-column border-right"> <li class="nav-item"><a class="nav-link" href="/mymusiclist">ミュージックリスト</a></li> </ul> </div> </nav> </div> <div class="col-md-6"> <div class="text-center"> @yield('content') </div> </div> <div class="col-md-3 d-none d-md-inline-block flex-column border-left"> <a class="btn btn-link" href="/pop_music">ア</a><br> <a href="https://recochoku.jp/ranking/single/daily?affiliate=4410101009" class="btn btn-link">レ</a><br> <a class="btn btn-link" href="https://music.dmkt-sp.jp/rank/single/daily/">ｄ</a> </div> <div class="dropdown d-block d-md-none"> <button class="dropdown-toggle btn btn-white" data-toggle="dropdown">ランキング</button> <div class="dropdown-menu"> <a class="dropdown-item" href="/pop_music">ア</a> <a class="dropdown-item" href="https://recochoku.jp/ranking/single/daily?affiliate=4410101009">レ</a> <a class="dropdown-item" href="https://music.dmkt-sp.jp/rank/single/daily/">ｄ</a> </div> </div> </div> </div> <div class="container"> <div class="row"> <footer class="col-12 footer fixed-bottom bg-white border-top"> <p>Place sticky footer content here.</p> </footer> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <link rel="stylesheet" href="css/styles.css" type="text/css"> </body> </html>
css
1body{position:relative; font-family: 'Osaka','sans-serif'; font-size: 24px; line-height: 300%;} 2img{vertical-align:bottom; display: block; float: left;} 3 4.footer{height:60px;} 5.migi{position:sticky;} 6 7 8input[type="checkbox"]{ 9 display: none; 10} 11.check{ 12 font-size: 16px; 13 padding-left: 30px; 14 position:relative; 15} 16.check::before{ 17 background-color: white; 18 border: 1px solid skyblue; 19 content: ""; 20 display: block; 21 position: absolute; 22 top: 2px; 23 left: 0; 24 height: 16px; 25 width: 16px; 26} 27input[type="checkbox"]:checked + .check::before{ 28 background-color: skyblue; 29} 30input[type="checkbox"]:checked + .check::after{ 31 border-bottom: 2px solid white; 32 border-right: 2px solid white; 33 content: ""; 34 display: block; 35 position: absolute; 36 top: 3px; 37 left: 5px; 38 height: 11px; 39 width: 6px; 40 transform: rotate(40deg); 41} 42 43#loader-bg { 44 display: none; 45 position: fixed; 46 width: 100%; 47 height: 100%; 48 top: 0px; 49 left: 0px; 50 background: #000; 51 z-index: 1; 52} 53#loader { 54 display: none; 55 position: fixed; 56 top: 50%; 57 left: 50%; 58 width: 200px; 59 height: 200px; 60 margin-top: -100px; 61 margin-left: -100px; 62 text-align: center; 63 color: #fff; 64 z-index: 2; 65} 66 67.submenu p{ 68 font-size: 16px; 69 margin: 0 0 1em 0; 70 cursor: pointer; 71} 72.submenu p:hover{ 73 text-decoration: underline; 74} 75.submenu ul{ 76 margin: 0 0 1em 0; 77 list-style-type: none; 78} 79.hidden { 80 display: none; 81} 82
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
どうやらナビゲーションバーが開いている間がほかの操作ができなくなっているみたいです。
https://jsfiddle.net/1f6u2ngd/ 提示されたコードですが、問題の再現手順を教えてください。
回答1件
0
HTML
1<a class="btn btn-link" href="url">レ<br><!-- ← a要素の閉じタグが無い -->
投稿2020/05/19 04:37
総合スコア69606
こちらのサイトでの記述ミスでした！すみません！
書き直さず、コピペしてください。また、「動かない」がどのような状況かを「何をしたときに」「どうなると思って」「どうなったのか」を具体的に記述されたほうが回答を得られやすいと思います。
追加しました。文字は青色ですが、カーソルをあてても押しても何の反応もない状態となっています。
https://jsfiddle.net/9u8n1yrk/ 提示のコードでは再現できませんでした。書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を質問文に追記されたほうが回答を得やすいと思います。
問題がもっと別のところにあるかもしれないのでもう一度整理して質問をしなおしたいと思います。
ご協力いただきありがとうございます。
質問は編集できるので、編集すればよいですよ。
あなたの回答
tips
プレビュー
