Q&A
環境：Mac Chrome Atom
現在、ドットインストールの「bootstrap4入門」の #21ハンバーガーメニューを作ろう
の学習中で、コードを同じように入力しています。
headerについてですが、ドットインストールでは画面を広げると、
↑こうなるのに対し、
私の場合
↑こうなり、Logoの横にLinkが表示されません。
また、画面幅を縮小し、ハンバーガーメニューをクリックした際、
ドットインストールでは、
↑こうなるのに対し、
私の場合
↑こうなってしまいます。
実際の私のコード↓
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <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"> 10 <link rel="stylesheet" href="css/style.css"> 11 <title>Dotinstall App</title> 12 13 <style> 14 .cover{ 15 background: url(img/bg.png); 16 background-size: cover; 17 } 18 </style> 19 </head> 20 <body> 21 <!-- 22 [p/m][location]-[size] 23 24 location 25 - t, b, l, r 26 - x（上下）, y（左右） 27 28 size 29 - 0 30 - 1: 0.25rem 31 - 2: 0.5rem 32 - 3: 1.0rem 33 - 4: 1.5rem 34 - 5: 3.0rem 35 - auto 36 --> 37 <!-- 38 bootstrapの４つのブレイクポイント 39 レスポンシブ用 40 ・576px and up: sm （576px以上） 41 ・768px and up: md 42 ・992px and up: lg 43 ・1200px and up: xl 44--> 45 <header> 46 <div class="container"> 47 <nav class="navbar navbar-expand-sm navbar-light"> 48 <a href="" class="navbar-brand">Logo</a> 49 <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> 50 <span class="navbar-toggler-icon" ></span> 51 </button> 52 <div id="menu" class="collapse" navbar-collapse> 53 <ul class="navbar-nav"> 54 <li class="nav-item"><a href="" class="nav-link">Link</a></li> 55 <li class="nav-item"><a href="" class="nav-link">Link</a></li> 56 <li class="nav-item"><a href="" class="nav-link">Link</a></li> 57 </ul> 58 </div> 59 </nav> 60 </div> 61 62 <div class="cover text-white text-center py-5"> 63 <h1 class="display-4 md-4 ">Dotinstall App</h1> 64 <a href="#" class="btn btn-primary btn-lg">Get It Now!</a> 65 </div> 66 </header> 67 68 <main> 69 <section class="py-5"> 70 <h2 class="text-center mb-5">Features</h2> 71 72 <div class="container"> 73 <div class="mb-5 row"> 74 <div class="col-sm-8"> 75 <h3>Awesome</h3> 76 <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. 77 Hello. Hello. Hello. Hello. Hello. Hello. </p> 78 </div> 79 <div class="col-sm-4"> 80 <img src="img/phone.png" class="w-100 rounded-circle" > 81 </div> 82 </div> 83 84 <div class="row"> 85 <div class="col-sm-8 order-sm-2"> 86 <h3>Awesome</h3> 87 <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. 88 Hello. Hello. Hello. Hello. Hello. Hello. </p> 89 </div> 90 <div class="col-sm-4 order-sm-1"> <!-- orderで表示順序を指定 --> 91 <img src="img/movie.png" class="w-100 rounded-circle" > 92 </div> 93 </div> 94 </div> 95 </section> 96<!-- ↓テーブルを作る --> 97 <section class="bg-light text-center py-5"> 98 <h2 class="mb-5">Plans</h2> 99 <div class="container"> 100 <table class="table table-hover"> 101 <thead> 102 <tr><th>Plan A</th><th>Plan B</th></tr> 103 </thead> 104 <tbody> 105 <tr><td>AA</td><td>BB</td></tr> 106 <tr><td>AAA</td><td>BBB</td></tr> 107 <tr><td>AAAA</td><td>BBBB</td></tr> 108 </tbody> 109 </table> 110 </div> 111 </section> 112 113<!-- ↓タブを作る --> 114 <section class="py-5"> 115 <h2 class="mb-5 text-center">How to use</h2> 116 <div class="container"> 117 <ul class="nav nav-tabs"> 118 <li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li> 119 <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li> 120 </ul> 121 <div class="tab-content py-4"> 122 <div id="ios" class="tab-pane active"> 123 <p>Hello iOS. Hello iOS. Hello iOS. <span class="font-weight-bold text-info" 124 data-toggle="tooltip" title="This is awesome" data-placement="bottom">Hello iOS. Hello iOS. </span>Hello iOS. Hello iOS. 125 Hello iOS. Hello iOS. </p> 126 </div> 127 <div id="android" class="tab-pane"> 128 <p>Hello android. Hello android. Hello android. Hello android. Hello android. Hello android. Hello android. 129 Hello android. Hello android. </p> 130 </div> 131 </div> 132 </div> 133 </section> 134<!--spanタグにツールチップ入れてる。 135data-placement="bottom"はツールチップを下に表示させる時に使う --> 136 137 <section class="bg-light text-center py-5"> 138 <a href="#" class="btn btn-primary btn-lg">Get It Now!</a> 139 </section> 140 </main> 141 <footer class="text-center text-muted py-4"> 142 Copyright YYYY dotinstall.com 143 </footer> 144 145 <!-- Optional JavaScript --> 146 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 147 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 148 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 149 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 150<!--ツールチップを反映させるために、↓jQueryのコードが必要らしい。今は意味不明 --> 151 <script> 152 $(function(){ 153 'use strict'; 154 $('[data-toggle="tooltip"]').tooltip(); 155 }); 156 </script> 157 158 159 </body> 160</html> 161
同じコードを入力していますが、同じように反映されないのは、bootstrapのバージョンが原因かと思い、
確かにドットインストールでbootstrapを読み込む際にコピペしているコードと、私のコードは違いました。（バージョンが違うから）
ドットインストールの場合↓
これはバージョンが違う事によってこの問題が起きているのでしょうか？
そうならば、ドットインストールと同じバージョンのスクリプトをコピペしたいのですが、
bootstrap公式のどこにありますか？
また、今のバージョンでハンバーガーメニューをきちんと（ドットインストール通り）表示させるにあたり、
適用させたい場合はどこにどのクラスを入力すれば良いのでしょうか？
その際、bootstrap公式の「どこに」記載あるのかも教えてください。
bootstrap公式が英語でわかりずらいです。
以上、よろしくお願いします。
回答1件
0
ベストアンサー
#menuに付与しているnavbar-collapse属性は、クラス属性にクラス名として付与しなければなりません(動作確認用リンク)。
HTML
1<!doctype html> 2<html lang="ja"> 3 4<head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <!-- Bootstrap CSS --> 10 <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"> 11 <link rel="stylesheet" href="css/style.css"> 12 <title>Dotinstall App</title> 13 14 <style> 15 .cover { 16 background: url(img/bg.png); 17 background-size: cover; 18 } 19 </style> 20</head> 21 22<body> 23 <!-- 24 [p/m][location]-[size] 25 26 location 27 - t, b, l, r 28 - x（上下）, y（左右） 29 30 size 31 - 0 32 - 1: 0.25rem 33 - 2: 0.5rem 34 - 3: 1.0rem 35 - 4: 1.5rem 36 - 5: 3.0rem 37 - auto 38 --> 39 <!-- 40 bootstrapの４つのブレイクポイント 41 レスポンシブ用 42 ・576px and up: sm （576px以上） 43 ・768px and up: md 44 ・992px and up: lg 45 ・1200px and up: xl 46--> 47 <header> 48 <div class="container"> 49 <nav class="navbar navbar-expand-sm navbar-light"> 50 <a href="" class="navbar-brand">Logo</a> 51 <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> 52 <span class="navbar-toggler-icon" ></span> 53 </button> 54 <div id="menu" class="collapse navbar-collapse"> 55 <ul class="navbar-nav"> 56 <li class="nav-item"><a href="" class="nav-link">Link</a></li> 57 <li class="nav-item"><a href="" class="nav-link">Link</a></li> 58 <li class="nav-item"><a href="" class="nav-link">Link</a></li> 59 </ul> 60 </div> 61 </nav> 62 </div> 63 64 <div class="cover text-white text-center py-5"> 65 <h1 class="display-4 md-4 ">Dotinstall App</h1> 66 <a href="#" class="btn btn-primary btn-lg">Get It Now!</a> 67 </div> 68 </header> 69 70 <main> 71 <section class="py-5"> 72 <h2 class="text-center mb-5">Features</h2> 73 74 <div class="container"> 75 <div class="mb-5 row"> 76 <div class="col-sm-8"> 77 <h3>Awesome</h3> 78 <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. </p> 79 </div> 80 <div class="col-sm-4"> 81 <img src="img/phone.png" class="w-100 rounded-circle"> 82 </div> 83 </div> 84 85 <div class="row"> 86 <div class="col-sm-8 order-sm-2"> 87 <h3>Awesome</h3> 88 <p>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. </p> 89 </div> 90 <div class="col-sm-4 order-sm-1"> 91 <!-- orderで表示順序を指定 --> 92 <img src="img/movie.png" class="w-100 rounded-circle"> 93 </div> 94 </div> 95 </div> 96 </section> 97 <!-- ↓テーブルを作る --> 98 <section class="bg-light text-center py-5"> 99 <h2 class="mb-5">Plans</h2> 100 <div class="container"> 101 <table class="table table-hover"> 102 <thead> 103 <tr> 104 <th>Plan A</th> 105 <th>Plan B</th> 106 </tr> 107 </thead> 108 <tbody> 109 <tr> 110 <td>AA</td> 111 <td>BB</td> 112 </tr> 113 <tr> 114 <td>AAA</td> 115 <td>BBB</td> 116 </tr> 117 <tr> 118 <td>AAAA</td> 119 <td>BBBB</td> 120 </tr> 121 </tbody> 122 </table> 123 </div> 124 </section> 125 126 <!-- ↓タブを作る --> 127 <section class="py-5"> 128 <h2 class="mb-5 text-center">How to use</h2> 129 <div class="container"> 130 <ul class="nav nav-tabs"> 131 <li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">iOS</a></li> 132 <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">Android</a></li> 133 </ul> 134 <div class="tab-content py-4"> 135 <div id="ios" class="tab-pane active"> 136 <p>Hello iOS. Hello iOS. Hello iOS. <span class="font-weight-bold text-info" data-toggle="tooltip" title="This is awesome" data-placement="bottom">Hello iOS. Hello iOS. </span>Hello iOS. Hello iOS. Hello iOS. Hello iOS. </p> 137 </div> 138 <div id="android" class="tab-pane"> 139 <p>Hello android. Hello android. Hello android. Hello android. Hello android. Hello android. Hello android. Hello android. Hello android. </p> 140 </div> 141 </div> 142 </div> 143 </section> 144 <!--spanタグにツールチップ入れてる。 145data-placement="bottom"はツールチップを下に表示させる時に使う --> 146 147 <section class="bg-light text-center py-5"> 148 <a href="#" class="btn btn-primary btn-lg">Get It Now!</a> 149 </section> 150 </main> 151 <footer class="text-center text-muted py-4"> 152 Copyright YYYY dotinstall.com 153 </footer> 154 155 <!-- Optional JavaScript --> 156 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 157 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 158 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 159 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 160 <!--ツールチップを反映させるために、↓jQueryのコードが必要らしい。今は意味不明 --> 161 <script> 162 $(function() { 163 'use strict'; 164 $('[data-toggle="tooltip"]').tooltip(); 165 }); 166 </script> 167 168</body> 169 170</html>
投稿2019/03/18 16:59
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/03/18 17:14
2019/03/18 17:27
退会済みユーザー
2019/03/19 08:56