Bootstrap 4 Dropdownマウスクリックからマウスサスペンショントリガメニューに変更

Bootstrap 4ナビゲーションバー(navbar)は、Dropdownによって実装された2次メニューをサポートしていますが、デフォルトではイベントをクリックして2次メニューを展開しますが、マウスが浮かぶとサブメニューを展開する必要があることが多いです.シナリオは次のとおりです.
CSS

.dropdown:hover>.dropdown-menu {
    display: block;
}

.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

小さなBugトップメニューとサブメニューの間に少し隙間があり、マウスを隙間に移動するとメニューが非表示になります.dropdown-menuのスタイルを変更し、mt-0のスタイルを追加すると隙間がありません.
HTML

<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link active" href="/">DevDoc</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/linux">Linux</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="/spring">Spring</a>
        <div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="/spring-data">Spring Data</a>
            <a class="dropdown-item" href="/spring-boot">Spring Boot</a>
            <a class="dropdown-item" href="/spring-cloud">Spring-Cloud</a>
        </div>
    </li>
    <li class="nav-item"><a class="nav-link" href="/docker">Docker</a></li>
    <li class="nav-item"><a class="nav-link" href="/mysql">MySQL</a></li>
</ul>