###前提・実現したいこと
現在Bootstrapの勉強をしております。
WebPageにnavberを実装しようとBootstrapnのHPや各説明サイト等を利用し、お手本をそのままコピペして動作確認を行なっているのですが、navberの固定ができません。
色々調べてみたのですが、原因がわからず先に進めなくなってしまいました。
もしどなたかわかる方がいらっしゃいましたらご教示のほどよろしくお願いします。
###発生している問題・エラーメッセージ
navbarがページ上部に固定されずスクロールすると文章とともに動いてしまう。
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta http-equiv="x-ua-compatible" content = "ie=edge"> 8 9 10 11 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 12 13 14 <style> 15 16 body { 17 position: relative; 18 margin-left:10px; 19 } 20 21 #one { 22 margin-top:70px; 23 } 24 25 </style> 26 </head> 27 <body data-spy="scroll" data-target="#navbar-example" data-offset="70"> 28 29 30 31 <nav class="navbar navbar-default bg-faded navbar-fixed-top" id="navbar-example"> 32 33 <ul class = "nav nav-tabs" role = "tablist"> 34 <li class="nav-item active"> 35 <a class="nav-link active" href="#one" >One</a> 36 </li> 37 <li class = "nav-item"> 38 <a class = "nav-link" href = "#two">Two</a> 39 </li> 40 <li class = "nav-item"> 41 <a class = "nav-link" href = "#three">Three</a> 42 </li> 43 44 </ul> 45 46 </nav> 47 48 49 50 <h2 id="one">one</h2> 51 <div>A cat and a fox were once discussing about hounds. 52 The cat said, "I hate hounds. They are very nasty animals. They hunt and kill us". 53 The fox said, "I hate hounds more than you". . 54 The cat asked, "How do you save yourself from hounds?" 55 The fox replied, "There are many tricks to get away from hounds". 56 The cat asked "Can you say what your tricks are?" 57 "They are very simple", said the fox. He added, "I can hide behind thick bushes. I can run along thorny hedges. I can hide in burrows. There are many more such tricks". 58 Now it was the turn of the fox to ask the cat about her tricks. 59 The fox asked, "How many tricks do you know?" 60 The cat replied, "I know just one trick". 61 The Fox sneered, "Oh! How sad! You know only one trick? What is your trick?" 62 The cat was about to answer. But, she found a flock of hounds fast approach. She said, "I am going to do it now. Because the hounds are coming". 63 Saying these words, the cat ran up a nearby tree safe from the hounds. The fox tried all his tricks but the hounds out beat him. "My one trick is better than all his tricks", said the cat to herself. 64 </div> 65 66 <h2 id="two">two</h2> 67 <div> 68 A cat and a fox were once discussing about hounds. 69 The cat said, "I hate hounds. They are very nasty animals. They hunt and kill us". 70 The fox said, "I hate hounds more than you". . 71 The cat asked, "How do you save yourself from hounds?" 72 The fox replied, "There are many tricks to get away from hounds". 73 The cat asked "Can you say what your tricks are?" 74 "They are very simple", said the fox. He added, "I can hide behind thick bushes. I can run along thorny hedges. I can hide in burrows. There are many more such tricks". 75 Now it was the turn of the fox to ask the cat about her tricks. 76 The fox asked, "How many tricks do you know?" 77 The cat replied, "I know just one trick". 78 The Fox sneered, "Oh! How sad! You know only one trick? What is your trick?" 79 The cat was about to answer. But, she found a flock of hounds fast approach. She said, "I am going to do it now. Because the hounds are coming". 80 Saying these words, the cat ran up a nearby tree safe from the hounds. The fox tried all his tricks but the hounds out beat him. "My one trick is better than all his tricks", said the cat to herself. 81 </div> 82 83 <h2 id="three">three</h2> 84 <div> 85 A cat and a fox were once discussing about hounds. 86 The cat said, "I hate hounds. They are very nasty animals. They hunt and kill us". 87 The fox said, "I hate hounds more than you". . 88 The cat asked, "How do you save yourself from hounds?" 89 The fox replied, "There are many tricks to get away from hounds". 90 The cat asked "Can you say what your tricks are?" 91 "They are very simple", said the fox. He added, "I can hide behind thick bushes. I can run along thorny hedges. I can hide in burrows. There are many more such tricks". 92 Now it was the turn of the fox to ask the cat about her tricks. 93 The fox asked, "How many tricks do you know?" 94 The cat replied, "I know just one trick". 95 The Fox sneered, "Oh! How sad! You know only one trick? What is your trick?" 96 The cat was about to answer. But, she found a flock of hounds fast approach. She said, "I am going to do it now. Because the hounds are coming". 97 Saying these words, the cat ran up a nearby tree safe from the hounds. The fox tried all his tricks but the hounds out beat him. "My one trick is better than all his tricks", said the cat to herself. 98 </div> 99 100 101 102 103 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 104 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 105 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 106 107 108 109 110 </body> 111</html> 112
###使用ツール (OS)
Mac book pro (OS Sierra 10.12.6)
Google Chrome(64bit)
Atom
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/18 21:57