Bootsrtap

bootstrap4|ドロップダウンが動かない

Bootstrap4のドロップダウンが動かなくてお困りの方、もしかしたらこれが原因かもしれません。

Bootstrap4では、JavaScriptの読み込みとして、jQueryとbootstrap.jsの他にpopper.jsというライブラリが必要になりました。Bootstrap3までの解説ページなどではこれについて言及がないため、popper.jsの読み込みが抜けてしまうことがあります。これだとドロップダウンメニューをクリックしても反応してくれないことがあります。

このファイルはダウンロードしたBootstrap4の「bootstrap-4.0.0」>「assets」>「js」>「vendor」の中にあります。このファイルをjsフォルダ内に一緒に入れておきます。popper.jsは読み込ませる順番も大切です(下記参照)。

下記は、CDNでの導入した場合のソースコードです。

<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- PopperのJS読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

上記の読み込みは順番も大切です。最初にjQuery、次にPopper.js、最後にbootstrap.jsという順番で読み込ませます。これでドロップダウンメニューが動くようになります。

この記事が何かお力になれたら幸いです。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP