Bootstrapのnavが意図したように表示しない

前提・実現したいこと

ブログサイト制作を学習するため、参考ブログを模倣しています。
参考ブログ　https://manablog.org/
ブログのナビゲーション部分を作成する際、参考ブログのソースをみるとBootstrapを使用していたので、同じようにコード書きましたが以下のような表示となってしまいます。

発生している問題・エラーメッセージ

【参考ブログの表示↓】

【作成したブログの表示↓】

エラーメッセージ：エラーメッセージの表示はありません。

該当のソースコード

HTML
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.0">
6  <title>manablog</title>
7  <link rel="stylesheet" href="css/styles.css">
8  <link rel="icon" href="favicon.ico">
9
10  <!-- Bootstrap3
11  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
12		[if lt IE 9]>
13			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
14			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
15		<![endif] -->
16
17  <!-- Bootstrap4 -->
18  <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">
19
20  <!-- 試し書き
21  <script type="text/javascript" async src="https://cdn.treasuredate.com/sdk/1.9.2/td.min.js">
22  </script>
23  <link rel="dns-prefetch" href="//s.w.org">
24  <script src="https://dalc.valuecommerce.com/vcid? s=https%3A%2F%2Fmaanblog.org%2F" type="text/javacript" charset="UTF-8">
25  </script> -->
26
27  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
28
29</head>
30<body>
31  <header>
32    <div class="container">
33      <div class="logo">
34        <img src="img/ダウンロード.png">
35      </div>
36      <div class="writer">
37        <p>Written by Manabu Bannai</p>
38      </div>
39    </div>
40    <div class="container-fluid nav-bg">
41      <div class="container">
42        <div class="row">
43          <nav>
44            <ul class="nav navbar-nav">
45              <li>
46                <a href="">
47                  <i class="fa fa-home" aria-hidden="true">
48                  </i>
49                </a>
50              </li>
51              <li>
52                <a href="">
53                  <i class="fa fa-home" aria-hidden="true">
54                  </i>
55                  プロフィール
56                </a>
57              </li>
58              <li class="dropdown">
59                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
60                  <i class="fa fa-line-chart" aria-hidden="true">
61                  </i>
62                  SEO
63                  <span class="caret">
64                  </span>
65                </a>
66                <ul class="dropdown">
67                  <li>
68                    <a href="">
69                    SEO  
70                    </a>
71                  </li>
72                  <li>
73                    <a href="">
74                    Affiliate  
75                    </a>
76                  </li>
77                </ul>
78              </li>
79              <li class="dropdown">
80                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
81                  <i class="fa fa-code" aria-hidden="true">
82                  </i>
83                  CODE
84                  <span class="caret">
85                  </span>
86                </a>
87                <ul class="dropdown">
88                  <li>
89                    <a href="">
90                    ALL
91                    </a>
92                  </li>
93                  <li>
94                    <a href="">
95                    WordPress
96                    </a>
97                  </li>
98                  <li>
99                    <a href="">
100                    PHP
101                    </a>
102                  </li>
103                  <li>
104                    <a href="">
105                    Codeigniter
106                    </a>
107                  </li>
108                  <li>
109                    <a href="">
110                    Laravel
111                    </a>
112                  </li>
113                  <li>
114                    <a href="">
115                    JavaScript
116                    </a>
117                  </li>
118                  <li>
119                    <a href="">
120                    CSS
121                    </a>
122                  </li>
123                </ul>
124              </li>
125              <li class="dropdown">
126                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
127                  <i class="fa fa-globe" aria-hidden="true">
128                  </i>
129                  LIFE
130                  <span class="caret">
131                  </span>
132                </a>
133                <ul class="dropdown">
134                  <li>
135                    <a href="">
136                    ALL
137                    </a>
138                  </li>
139                  <li>
140                    <a href="">
141                    Work
142                    </a>
143                  </li>
144                  <li>
145                    <a href="">
146                    Blog
147                    </a>
148                  </li>
149                  <li>
150                    <a href="">
151                    Game
152                    </a>
153                  </li>
154                  <li>
155                    <a href="">
156                    Freelance
157                    </a>
158                  </li>
159                  <li>
160                    <a href="">
161                    Remote Work
162                    </a>
163                  </li>
164                </ul>
165              </li>
166              <li>
167                <a href="">
168                  <i class="fa fa-btc" aria-hidden="true">
169                  </i>
170                  CRYPTO
171                </a>
172              </li>
173              <li>
174                <a href="">
175                  <i class="fa fa-plane" aria-hidden="true">
176                  </i>
177                  TRAVEL
178                </a>
179              </li>
180              <li>
181                <a href="">
182                  <i class="fa fa-spinner" aria-hidden="true">
183                  </i>
184                  THOUGHT
185                </a>
186              </li>
187              <li>
188                <a href="">
189                  <i class="fa fa-glass" aria-hidden="true">
190                  </i>
191                  PARTY
192                </a>
193              </li>
194            </ul>
195          </nav>
196        </div>
197      </div>
198    </div>
199  </header>
200  
201  <!-- Bootstrap3
202  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
203		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> -->
204
205  <!-- Bootstrap4 -->
206  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
207  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
208  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
209
210
211
212</body>
213</html>

該当のソースコード

navに関連するスタイリングは行なっていないが念のため掲載。

CSS
1@charset "UTF-8";
2
3body {
4 margin: 0;
5}
6
7.container{
8  display: flex;
9}
10
11.writer{
12  margin-right: 15px;
13  /* flex-basis: auto; */
14  
15}
16
17.writer p{
18font-family: "A-OTF-ShinGoPro-Regular";
19font-size: 13px;
20color: #6f6f6f;
21width: 80px;
22margin-top: 35px; 
23line-height: 2em;
24}
25
26/* .class{
27  display: inline-block;
28} */
29
30.logo{
31  flex: 1;
32  margin-left: 15px;
33  margin-right: 15px;
34  width: 100%;
35  height: auto;
36}
37
38.logo img{
39  width: 100%;
40  min-width: 386px;
41  height: auto;
42  margin-top: 30px;
43}
44
45
46@media (min-width:686px){
47  .writer p{
48    width: 100px;
49  }
50}
51
52
53@media (min-width:768px){
54  .container{
55    width:750px;
56    margin-left: auto;
57    margin-right: auto;
58    
59  }
60  
61  .logo{
62    flex: 0;
63  }
64
65  .logo img{
66    min-width: 95px;
67    margin-top: 33px;
68    /* vertical-align: middle; */
69  }
70
71  .writer p{
72    width: 200px;
73    margin-left: 15px;
74  }
75}

試したこと

・誤字、語順誤りの確認
・Bootstrap3と4のCDN使用に必要なテンプレートを両方試す→変化なし
・参考ブログのCSSソースをすべてコピペし、自分で書いたHTMLを試す→変化なし
・参考ブログのHTMLソースをすべてコピペしチェック→当然、参考ブログと同じ表示になる
・参考ブログのHTMLソースのstylesheetを削除しチェック→自分で書いたHTMLと同じような表示になる
・参考ブログのstylesheetから、必要な情報を確認するも、情報量が膨大で何が問題解決に必要な情報かわからない

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

Bootstrapの読み込みは下記のコードで確認できました。

・元のサイトはそもそもハンバーガーメニューにバグがあります。

Bootstrapを使ってサイトを作るなら公式ドキュメントを読んだ方が良いです。
公式にもnavbar (https://getbootstrap.jp/docs/4.2/components/navbar/) として
ハンバーガーメニュー（レスポンス時）は用意されています。

その上でオーバーライドするなり、自作でcss/scss書くなりした方が良いです。

またいきなりBootstrapをやるよりもhtml/cssをちゃんとした人から習った方が後で困らないかと思います。
参考までに。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>manablog</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="favicon.ico">

  <!-- Bootstrap3
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        [if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif] -->

  <!-- Bootstrap4 -->
  <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">

  <!-- 試し書き
  <script type="text/javascript" async src="https://cdn.treasuredate.com/sdk/1.9.2/td.min.js">
  </script>
  <link rel="dns-prefetch" href="//s.w.org">
  <script src="https://dalc.valuecommerce.com/vcid? s=https%3A%2F%2Fmaanblog.org%2F" type="text/javacript" charset="UTF-8">
  </script> -->

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>
<body>
  <header>
    <div class="container">
      <div class="logo">
        <img src="img/ダウンロード.png">
      </div>
      <div class="writer">
        <p>Written by Manabu Bannai</p>
      </div>
    </div>
    <div class="container-fluid nav-bg">
      <div class="container">
        <div class="row">
          <nav>
            <ul class="nav navbar-nav">
              <li>
                <a href="">
                  <i class="fa fa-home" aria-hidden="true">
                  </i>
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fa fa-home" aria-hidden="true">
                  </i>
                  プロフィール
                </a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-line-chart" aria-hidden="true">
                  </i>
                  SEO
                  <span class="caret">
                  </span>
                </a>
                <ul class="dropdown">
                  <li>
                    <a href="">
                    SEO
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Affiliate
                    </a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-code" aria-hidden="true">
                  </i>
                  CODE
                  <span class="caret">
                  </span>
                </a>
                <ul class="dropdown">
                  <li>
                    <a href="">
                    ALL
                    </a>
                  </li>
                  <li>
                    <a href="">
                    WordPress
                    </a>
                  </li>
                  <li>
                    <a href="">
                    PHP
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Codeigniter
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Laravel
                    </a>
                  </li>
                  <li>
                    <a href="">
                    JavaScript
                    </a>
                  </li>
                  <li>
                    <a href="">
                    CSS
                    </a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  <i class="fa fa-globe" aria-hidden="true">
                  </i>
                  LIFE
                  <span class="caret">
                  </span>
                </a>
                <ul class="dropdown">
                  <li>
                    <a href="">
                    ALL
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Work
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Blog
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Game
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Freelance
                    </a>
                  </li>
                  <li>
                    <a href="">
                    Remote Work
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="">
                  <i class="fa fa-btc" aria-hidden="true">
                  </i>
                  CRYPTO
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fa fa-plane" aria-hidden="true">
                  </i>
                  TRAVEL
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fa fa-spinner" aria-hidden="true">
                  </i>
                  THOUGHT
                </a>
              </li>
              <li>
                <a href="">
                  <i class="fa fa-glass" aria-hidden="true">
                  </i>
                  PARTY
                </a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </header>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

  <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

  <!-- Bootstrap3
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> -->

  <!-- Bootstrap4 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



</body>
</html>

投稿2020/08/13 23:26

sunglass

総合スコア303

kyohei_nakano

2020/08/14 20:53

迅速なご回答ありがとうございます！！基礎知識の学習をもっと進めていきたいとおもいます！ちなみに、「試したこと」から仮定している「同じようにコードを書いていても表示が異なる原因はCSSにある」という認識は間違ってはいないのでしょうか。それともバグがあることが起因しているのでしょうか。

sunglass

2020/08/15 06:28

元のサイトに問題がある以上そちらをコピペ（＝同じようにコードを書いたと）しても再現出来ないです。（目的が）レスポンス時にハンバーガーメニューに切り替わるnavigation barを作りたいなら Bootstrapが用意しているnav barクラスを使用して実装すべきです。原因探しをしたいならhtml/cssをちゃんと基礎から学ぶべきです。（Bootstrapの勉強も）ざっくり拝見した限りでも公式の https://getbootstrap.jp/docs/4.2/components/navbar/ （の中から）で十分再現出来ますし（見た感じ）バグもなさそうです。

kyohei_nakano

2020/08/15 13:36

ご返答ありがとうございます！！引き続きhtml/cssの学習を進めて行こうと思います。ご指導ありがとうございました！

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