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という順番で読み込ませます。これでドロップダウンメニューが動くようになります。

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