(bootstrap/CSS)ヘッダーにあるドロップダウンリストが表示されない

Question

bootstrap:4.1

Bootstrap参考サイト
こちらのBootstrap公式サイトのサンプルが気に入ったため、ボディ以下のソースコードをコピペし少し改変させたいと思いました。
しかし固定ヘッダの下にある白いサブ(？)ヘッダのようなところにあるリンクをドロップダウンにしたいのですがドロップダウンリストが表示されません。

白いnavではクリックしても何故かこのようなドロップダウンを表示することができません。何かが表示を邪魔しているのでしょうか？
navbarのsettingsの部分を丸コピしただけなのですが、、、下の白いnavbarは以下のようなコードとしております。

 <div class="nav-scroller bg-white shadow-sm">
      <nav class="nav nav-underline">
        <a class="nav-link active" href="#">Swipe</a>
      <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
<!--中略 -->   
      </nav>
    </div>

一方dropdownが表示出来るnavヘッダーは以下のようなソースコードになっていました。

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
      <a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
      <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
          </li>
<!--中略 -->     
          <li class="nav-item">
            <a class="nav-link" href="#">Switch account</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
<!--中略 -->
      </div>
    </nav>

色々クラスをいじって試してみたのですが上手くいきません。。。何の違いでクリックしてもドロップダウンリストを表示できないのでしょうか白いnavbarにdropdownやツリーを表示する方法を知りたいです。
宜しくお願い致します。

Comments

[marlboro_tata]

ご自身で改変したというコードを追記すると、回答がつきやすいかもしれません。

[widget11]

改変したコードに変更致しました。

[marlboro_tata]

ありがとうございます。ブラウザのデベロッパーツールなどで、何かエラーメッセージなどは表示されていませんか？

[marlboro_tata]

IDは特に関係がないようでした。当方の環境で調べましたが、上記に記載のコードで、ドロップダウンは正常に動くことが確認できました。　おそらく、挙動に必要なjavascriptファイルを正確に読み込めていない可能性が高いです。　重複して質問している　https://teratail.com/questions/157551 こちらの方で回答がついているのを見ましたので、回答に従って確認してみてください。