Bootstrapにおいてのnavberの固定方法

###前提・実現したいこと
現在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件

ベストアンサー

Bootstrap4betaであれば公式サイトにnavberを上部固定のサンプルがあるので、
ブラウザでソースコードを見てその中のnavbar-top-fixed.css等を参考にするとできるかと思います。
Bootstrap4 Examples
Fixed navbar

投稿2017/08/18 02:23

編集2017/08/19 00:42

aro10

総合スコア4106

ntslB

2017/08/18 21:57

回答ありがとうございました。上記サイトを参照したところfixed-topの記入方法が変わっていました。これで先に進めます。ありがとうございました。

行動規範の内容に同意します

nav要素などに設定されているクラス名から、質問者さんがお手本にしたサイトは**Bootstrap 3を使用している**のではないでしょうか？質問者さんのコードではBootstrap 4を使っているため、想像するような動作になっていないのではないかと思います。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6    <meta http-equiv="x-ua-compatible" content="ie=edge">
7    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!-- 修正 -->
8    <style type="text/css">
9        body {
10            position: relative;
11            margin-left: 10px;
12        }
13
14        nav {
15            background-color: #ffffff;
16        }
17
18        #one {
19            margin-top: 70px;
20        }
21    </style>
22</head>
23<body data-spy="scroll" data-target="#navbar-example" data-offset="70">
24<nav class="navbar navbar-default bg-faded navbar-fixed-top" id="navbar-example">
25    <ul class="nav nav-tabs" role="tablist">
26        <li class="nav-item active">
27            <a class="nav-link active" href="#one">
28                One
29            </a>
30        </li>
31        <li class="nav-item">
32            <a class="nav-link" href="#two">
33                Two
34            </a>
35        </li>
36        <li class="nav-item">
37            <a class="nav-link" href="#three">
38                Three
39            </a>
40        </li>
41    </ul>
42</nav>
43<h2 id="one">one</h2>
44<div>
45    A cat and a fox were once discussing about hounds.
46    The cat said, "I hate hounds. They are very nasty animals. They hunt and kill us".
47    The fox said, "I hate hounds more than you". .
48    The cat asked, "How do you save yourself from hounds?"
49    The fox replied, "There are many tricks to get away from hounds".
50    The cat asked "Can you say what your tricks are?"
51    "They are very simple", said the fox. He added, "I can hide behind thick bushes. I can run along thorny hedges. I
52    can hide in burrows. There are many more such tricks".
53    Now it was the turn of the fox to ask the cat about her tricks.
54    The fox asked, "How many tricks do you know?"
55    The cat replied, "I know just one trick".
56    The Fox sneered, "Oh! How sad! You know only one trick? What is your trick?"
57    The cat was about to answer. But, she found a flock of hounds fast approach. She said, "I am going to do it now.
58    Because the hounds are coming".
59    Saying these words, the cat ran up a nearby tree safe from the hounds. The fox tried all his tricks but the hounds
60    out beat him. "My one trick is better than all his tricks", said the cat to herself.
61</div>
62
63<h2 id="two">two</h2>
64<div>
65    A cat and a fox were once discussing about hounds.
66    The cat said, "I hate hounds. They are very nasty animals. They hunt and kill us".
67    The fox said, "I hate hounds more than you". .
68    The cat asked, "How do you save yourself from hounds?"
69    The fox replied, "There are many tricks to get away from hounds".
70    The cat asked "Can you say what your tricks are?"
71    "They are very simple", said the fox. He added, "I can hide behind thick bushes. I can run along thorny hedges. I
72    can hide in burrows. There are many more such tricks".
73    Now it was the turn of the fox to ask the cat about her tricks.
74    The fox asked, "How many tricks do you know?"
75    The cat replied, "I know just one trick".
76    The Fox sneered, "Oh! How sad! You know only one trick? What is your trick?"
77    The cat was about to answer. But, she found a flock of hounds fast approach. She said, "I am going to do it now.
78    Because the hounds are coming".
79    Saying these words, the cat ran up a nearby tree safe from the hounds. The fox tried all his tricks but the hounds
80    out beat him. "My one trick is better than all his tricks", said the cat to herself.
81</div>
82<h2 id="three">three</h2>
83<div>
84    A cat and a fox were once discussing about hounds.
85    The cat said, "I hate hounds. They are very nasty animals. They hunt and kill us".
86    The fox said, "I hate hounds more than you". .
87    The cat asked, "How do you save yourself from hounds?"
88    The fox replied, "There are many tricks to get away from hounds".
89    The cat asked "Can you say what your tricks are?"
90    "They are very simple", said the fox. He added, "I can hide behind thick bushes. I can run along thorny hedges. I
91    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.
97    Because the hounds are coming".
98    Saying these words, the cat ran up a nearby tree safe from the hounds. The fox tried all his tricks but the hounds
99    out beat him. "My one trick is better than all his tricks", said the cat to herself.
100</div>
101<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
102<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
103<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!-- 修正 -->
104</body>
105</html>