bootstrap4のナビゲーションバーのナビゲーションのcollapseの意味

bootstrap4のナビゲーションバーのナビゲーションのcollapseについて、手元の参考書には「ナビゲーションバー内に切り替え表示されるコンテンツを作成」とあります。
しかし、この<div class="collapse navbar-collapse">を書くと、表示がされません。
atomのhtml-previewを使って確認しました。
画像は以下の通りです。

<div class="collapse navbar-collapse">を抜いて実行すると、表示はされるようになりますが、縦に表示されます。

この<div class="collapse navbar-collapse">が機能しない原因は何でしょうか。
ご存知の方、回答お願いします。

試したこと

<div class="collapse navbar-collapse">を抜いて実行 google chromeで、表示して確認(bootstrap4が適用されない)

実現したいこと
ドロップダウンの実装

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/custom.css">
  <title>Mr. M COFFEE</title>
</head>
<body>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-happopup="true" aria-expanded="false">ドロップダウン切り替え</a>
          <div class="dropdown-menu" aria-labelleadby="navbarDropdownMenu">
            <a class="dropdown-item" href="#">ドロップダウンリンク1</a>
          </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" ef="#">リンク</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">リンク２</a>
        </li>
      </ul>
    </div>

  </nav>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

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

回答2件

自己解決

解決しました。ありがとうございました。

投稿2019/12/11 02:34

ryoooos

総合スコア11

bootstrapのいくつかの要素はjqueryとそのいくつかのライブラリに依存関係があります。
下記サイトの[JavaScript を必要とするコンポーネントを表示]の個所を見てみてください。
bootstrap公式ページ

※以下を記載すると動きます

html
1<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
2<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
3<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>