Bootstrap3のドロップダウンをマウスオーバーでも動くようにする方法

Bootstrapのドロップダウンはデフォルトではクリックで開く仕様ですが、メインメニューなどではマウスオーバーで開くようにしたいところです。

下記をCSSに追加するだけで、マウスオーバーで反応してくれるようになります。

スマフォのトグルメニューに対応する場合

しかし、画面幅がスマフォサイズの場合のトグルメニューでは、マウスオーバーで反応させてしまうと見た目が微妙なことになってしまいます。

下記のようにメディアクエリーを使用して、タブレットサイズ以上の時のみマウスオーバーで動くようにします。
※メディアクエリーの (min-width: $screen-sm-min) と指定している部分は、bootstrap-sassを利用している場合です。
bootstrap-sassを使用していない場合は、 (min-width: 768px) のようにスマートフォン向けのブレイクポイントの数値を入力してください。

ドロップダウンをタップ（クリック）で開くと、スマフォ向けの体裁で表示されるようになりました。