質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2795閲覧

Bootstrapでナビゲーションバーが表示されない

srmm1025

総合スコア12

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2019/03/05 17:17

編集2019/03/05 17:36

ナビゲーションバーを正しく表示させたい

Bootstrapでサイト作りの練習をしています。ヘッダーから作成しているのですが、ナビゲーションバーが正しく表示できません。
色々調べたのですが、解決できるような答えが見つかりませんでした。

イメージ説明
1. ナビゲーションナビをヘッダーの写真の上部に表示させたい。
2. ナビゲーションナビのMr.MCOFFEEの右側にナビゲーションメニューが表示されない。
イメージ説明
サイズが小さくなると表示される。
イメージ説明
サイズを小さくしてメニューを開くと
イメージ説明)
表示される。

コードはこちらです。

Bootstrap

1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 7 <title>カフェ Mr. M COFFEE</title> 8 </head> 9 <body> 10 <div class="container text-center"> 11 <h1>Mr. M COFFEE</h1> 12 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 13 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 14 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 15 16 17 <!-- header --> 18 <header class="py-4"> 19 <img src="gazou/c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="Mr. M COFFEE"></a> 20 </div> 21 </header> 22 <!-- nav --> 23 <nav> 24 <!--ナビゲーションバー--> 25    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> 26 <div class="container"> 27 <!--サブコンポーネント--> 28 <a class="navbar-brand" href="index.html">Mr. M COFFEE</a> 29 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> 30 <span class="navbar-toggler-icon"></span> 31 </button> 32 <!--ナビゲーションー--> 33 <div class="collapse navbar]-collapse" id="navbar-content"> 34 <!--ナビゲーションメニュー--> 35 <ul class="navbar-nav" mr-auto> 36 <li class="nav-item active"> 37 <a class="nav-link" href="#">Top <span class="sr-only">(current)</span></a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#">About</a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="#">Menu</a> 44 </li> 45 <li class="nav-item"> 46 <a class="nav-link" href="#">Coupon</a> 47 </li> 48 <li class="nav-item"> 49 <a class="nav-link" href="#">information</a> 50 </li> 51 </ul> 52 <!--右側のメニュー:Contactページへのリンク--> 53 <ul class="navbar-nav"> 54 <li class="nav-item"> 55 <a href="contact.html" class="nav-link btn btn-info">Contact</a> 56 </li> 57 </ul> 58 <!--ドロップダウン--> 59 <li class="nav-item dropdown"> 60 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Information 61 </a> 62 <div class="dropdown-menu" aria-labeliedby="navbarDropdown"> 63 <a class="dropdown-item" href="#">Shop</a> 64 <a class="dropdown-item" href="#">Access</a> 65 </div> 66 </li> 67 </div> 68 </div> 69 </nav> 70</nav> 71 72 <!-- main --> 73 <main> 74 <!--メインビジュアル--> 75 <div class="py-4"> 76     <div class="container"> 77 <!--カルーセル外枠--> 78 <div id="main_visual" class="carusel slide" data-ride="carusel"> 79 <!--インジゲーター--> 80 <ol class="carusel-indicators"> 81      各インジゲーター 82 </ol> 83 <!--カルーセル内枠--> 84 <div class="carusel-inner"> 85 <div class="carusel-item"> 86 87 </div> 88 89 </div> 90 91 </div> 92 93 94 </div> 95 96 97 </div> 98 <!--コンテンツ01--> 99 <div class="py-4"> 100 101 </div> 102 <!--コンテンツ02--> 103 <div class="py-4"> 104 105 </div> 106 <!--コンテンツ03--> 107 <div class="py-4"> 108 109 </div> 110 <!--コンテンツ04--> 111 <div class="py-4"> 112 113 </div> 114 <!--コンテンツ05--> 115 <div class="py-4"> 116 117 </div> 118 </main> 119 <!--フッター--> 120 <footer class="py-4"> 121 122 </footer> 123 124 </body> 125</html> 126 127

コードを見直したり、調べたりしたのですがわかりませんでした。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/03/05 17:32

(質問文は編集できます)コードはスクリーンショットでなくコードブロックにテキストでお書きください。また、Bootstrapはバージョンも提示してください。
guest

回答1

0

ベストアンサー

以下の修正を行うことで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

  • header要素のimg要素よりも上にnav要素を移動
  • img要素末尾のa要素, div要素の終了タグを削除
  • img要素にimg-fluidクラスを付与
  • 2 重でnav要素が書かれているので、一方を削除
  • #navbar-contentが付与された要素のnavbar]-collapseクラスをnavbar-collapseクラスに修正
  • ドロップダウンのli要素をnavbar-navクラスを付与したul要素で囲む
  • #navbar-contentが付与された要素内の最初のul要素に付与されたmr-auto属性を削除し、mr-autoクラスを付与する

HTML

1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 8 <title>カフェ Mr. M COFFEE</title> 9</head> 10 11<body> 12 <div class="container text-center"> 13 <h1>Mr. M COFFEE</h1> 14 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 15 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 16 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 17 18 <!-- header --> 19 <header class="py-4"> 20 <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> 21 <div class="container"> 22 <!--サブコンポーネント--> 23 <a class="navbar-brand" href="index.html">Mr. M COFFEE</a> 24 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation"> 25 <span class="navbar-toggler-icon"></span> 26 </button> 27 <!--ナビゲーションー--> 28 <div class="collapse navbar-collapse" id="navbar-content"> 29 <!--ナビゲーションメニュー--> 30 <ul class="navbar-nav mr-auto"> 31 <li class="nav-item active"> 32 <a class="nav-link" href="#">Top <span class="sr-only">(current)</span></a> 33 </li> 34 <li class="nav-item"> 35 <a class="nav-link" href="#">About</a> 36 </li> 37 <li class="nav-item"> 38 <a class="nav-link" href="#">Menu</a> 39 </li> 40 <li class="nav-item"> 41 <a class="nav-link" href="#">Coupon</a> 42 </li> 43 <li class="nav-item"> 44 <a class="nav-link" href="#">information</a> 45 </li> 46 </ul> 47 <!--右側のメニュー:Contactページへのリンク--> 48 <ul class="navbar-nav"> 49 <li class="nav-item"> 50 <a href="contact.html" class="nav-link btn btn-info">Contact</a> 51 </li> 52 </ul> 53 <!--ドロップダウン--> 54 <ul class="navbar-nav"> 55 <li class="nav-item dropdown"> 56 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Information 57 </a> 58 <div class="dropdown-menu" aria-labeliedby="navbarDropdown"> 59 <a class="dropdown-item" href="#">Shop</a> 60 <a class="dropdown-item" href="#">Access</a> 61 </div> 62 </li> 63 </ul> 64 </div> 65 </div> 66 </nav> 67 <img src="http://placehold.jp/ffff88/ffffff/800x600.png?text=gazou/c2cd16d0a7f926968200d5d809ec9f9e_s.jpg" alt="Mr. M COFFEE" class="img-fluid"> 68 </div> 69 </header> 70 <!-- nav --> 71 72 <!-- main --> 73 <main> 74 <!--メインビジュアル--> 75 <div class="py-4"> 76 77 <div class="container"> 78 <!--カルーセル外枠--> 79 <div id="main_visual" class="carusel slide" data-ride="carusel"> 80 <!--インジゲーター--> 81 <ol class="carusel-indicators"> 82 各インジゲーター 83 </ol> 84 <!--カルーセル内枠--> 85 <div class="carusel-inner"> 86 <div class="carusel-item"> 87 88 </div> 89 90 </div> 91 92 </div> 93 94 </div> 95 96 </div> 97 <!--コンテンツ01--> 98 <div class="py-4"> 99 100 </div> 101 <!--コンテンツ02--> 102 <div class="py-4"> 103 104 </div> 105 <!--コンテンツ03--> 106 <div class="py-4"> 107 108 </div> 109 <!--コンテンツ04--> 110 <div class="py-4"> 111 112 </div> 113 <!--コンテンツ05--> 114 <div class="py-4"> 115 116 </div> 117 </main> 118 <!--フッター--> 119 <footer class="py-4"> 120 121 </footer> 122 123</body> 124 125</html>

投稿2019/03/05 18:44

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

srmm1025

2019/03/06 03:38

素早い回答ありがとうございました!! 全ての問題が解決いたしました!! これからも勉強頑張ります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問