twitter-bootstrap - Bootstrap 4.0.0 マルチレベル ホバー メニューがページ幅に反応しない (画面外になる)

Question

ホバー付きのマルチレベル メニューは正常に動作しています。ただし、ページが狭くなりすぎた場合は、ドロップダウンが画面上に表示される必要があります。
私のメニューには、英語のツールチップを含むオランダ語のメニューテキストがあります（両方を同時に機能させるためのいくつかのjquery）。
ほとんどすべての li と ul は、よりクリーンな html の div に置き換えられます。（より多くのレベルでそれを行う方法を理解するのにしばらく時間がかかりました）.

ページにドロップダウンを保持するためのSam SehnertによるJQueryプラグインを見つけましたが、それはメニューのホバーなしで、クリックでのみ機能しました。私のメニューでは機能しません。方法を知っている人はいますか? 私は Bootstrap 4.0.0 を使用していますが、JQuery の知識はほとんどありません。
ナビゲーションバーで使用するため、元のプラグインコードの「li」を「div」に変更しました。
"on('click', function(e)" をホバーやマウスオーバーなどの何かに変更する必要があると思います。試してみましたが、成功しませんでした。

（メニューは奇妙に見えるかもしれませんが、多くの色とフォントを省略しました。今のところ、ホバーとビューポートチェックが機能することだけが必要です。）

メニュー自体：

      <!-- Centered navbar -->
  <nav class="navbar navbar-expand-md navbar-mtw navbg-mtw">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
<span id="dimensions"></span><!-- page size here -->
    <div class="collapse navbar-collapse justify-content-md-center" id="navbarCollapse">
      <ul class="nav navbar-nav nav-tabs">

        <!-- HOME -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown01" data-toggle="dropdown tooltip" 
             aria-haspopup="true" aria-expanded="false" data-placement="left" 
             title="Home">Home</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
               title="News">Nieuws</a>
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
               title="Contact me">Contact</a>
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
               title="About me">Over mij</a>
          </div>
        </li>

    <!-- GENEALOGIE -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown02" data-toggle="dropdown tooltip" 
             aria-haspopup="true" aria-expanded="false" data-placement="left" 
             title="Genealogy">Genealogie</a>
          <div class="dropdown-menu" aria-labelledby="dropdown02">
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
            title="My family tree">Stamboom Kosmis-Sipsma-Schouten-Rol</a>
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
            title="Links to information">Links naar informatie</a>
          </div>
        </li>

    <!-- DEN HELDER -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown03" data-toggle="dropdown tooltip" 
             aria-haspopup="true" aria-expanded="false" data-placement="left" 
             title="My hometown: Den Helder">Den Helder</a>
          <div class="dropdown-menu" aria-labelledby="dropdown03">
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
            title="Where to find my city">Mijn woonplaats</a>
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
            title="A bit of history">Wat historie</a>
          </div>
        </li>

    <!-- HOBBIES -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle mtw-dropdown" href="#" id="dropdown04" data-toggle="dropdown tooltip" 
             aria-haspopup="true" aria-expanded="false" data-placement="left" 
             title="My hobbies">Hobbies</a>
          <div class="dropdown-menu" aria-labelledby="dropdown04">

            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
               title="Programming">Programmeren</a>
            <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
               title="My dogs">Mijn honden</a>

            <div class="dropdown-submenu">
              <a href="#" class="dropdown-item dropdown-toggle mtw-dropdown" id="dropdown0401" 
                 data-toggle="dropdown tooltip" aria-haspopup="false" aria-expanded="false" 
                 data-placement="left" title="Webdesign">Webdesign</a>
              <div class="dropdown-menu" aria-labelledby="dropdown0401">
                <a href="#" class="dropdown-item" data-toggle="tooltip" data-placement="top" 
                   title="Software">Software</a>
                <a href="#" class="dropdown-item" data-toggle="tooltip" data-placement="left" 
                   title="Fonts and dimensions">Fonts en maatvoering</a>


    <!--    TESTPAGINA'S -->
                <div class="dropdown-submenu">
                  <a  class="dropdown-item dropdown-toggle mtw-dropdown"  id="dropdown0402" 
                     data-toggle="dropdown tooltip" aria-haspopup="false" aria-expanded="false" 
                     data-placement="left" title="Some testpages">Testpagina's</a>
                  <div class="dropdown-menu" aria-labelledby="dropdown0402">

                    <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="top" 
                       title="Headings and Lorem Ipsum">Koppen en Lorem Ipsum</a>
                    <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
                       title="2 columns example">2 kolommen voorbeeld</a>
                    <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
                       title="Empty template">Leeg template</a>
                    <a class="dropdown-item" href="#" data-toggle="tooltip" data-placement="left" 
                       title="1 centered column">1 kolom gecentreerd</a>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </li>

      </ul>
    </div>
  </nav>

JavaScript ファイル:

//
// Javascript file for my stylesheet
//

// ----- BEGIN     navbar fixed top 
// ----- BEGIN     navbar fixed top 
// This is to have the navbar in a fixed top position when page scrolls down

$(document).ready(function () {

// Calculating the distance from the top of the page to the initial position of the navbar, and store it in a variable
var navbarOffest = $('.navbar').offset().top;

$(window).on('scroll', function () {

    var navbarHeight = $('.navbar').outerHeight();

    if ( $(window).scrollTop() >= navbarOffest ) {
        $('.navbar').addClass('fixed-top');
        $('body').css('padding-top', navbarHeight + 'px');
    } else {
        $('.navbar').removeClass('fixed-top');
        $('body').css('padding-top', '0');
        }
    });

});
// ----- END       navbar fixed top 
// ----- END       navbar fixed top 


// ----- BEGIN     tooltips 
// ----- BEGIN     tooltips 

// ======== Needed to have tooltips function correctly

// initialize tooltips after page loading is complete
$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

// needed for dropdown AND tooltip functioning together on dropdown-toggle classes
$('.mtw-dropdown').dropdown();
$('.mtw-dropdown').tooltip();
// ----- END       tooltips 
// ----- END       tooltips 


// ----- BEGIN     Keep dropdowns and sub-dropdowns onscreen on small screens 
// ----- BEGIN     Keep dropdowns and sub-dropdowns onscreen on small screens 
(function($){

/**
 * Copyright 2012, Digital Fusion
 * Licensed under the MIT license.
 * http://teamdf.com/jquery-plugins/license/
 *
 * @author Sam Sehnert
 * @desc A small plugin that checks whether elements are within
 *       the user visible viewport of a web browser.
 *       only accounts for vertical position, not horizontal.
 */
$.fn.visible = function(partial,hidden,direction,container){

    if (this.length < 1)
        return;

    var $t          = this.length > 1 ? this.eq(0) : this,
                    isContained = typeof container !== 'undefined' && container !== null,
                    $w                = isContained ? $(container) : $(window),
                    wPosition        = isContained ? $w.position() : 0,
        t           = $t.get(0),
        vpWidth     = $w.outerWidth(),
        vpHeight    = $w.outerHeight(),
        direction   = (direction) ? direction : 'both',
        clientSize  = hidden === true ? t.offsetWidth * t.offsetHeight : true;

    if (typeof t.getBoundingClientRect === 'function'){

        // Use this native browser method, if available.
        var rec = t.getBoundingClientRect(),
            tViz = isContained ?
                                            rec.top - wPosition.top >= 0 && rec.top < vpHeight + wPosition.top :
                                            rec.top >= 0 && rec.top < vpHeight,
            bViz = isContained ?
                                            rec.bottom - wPosition.top > 0 && rec.bottom <= vpHeight + wPosition.top :
                                            rec.bottom > 0 && rec.bottom <= vpHeight,
            lViz = isContained ?
                                            rec.left - wPosition.left >= 0 && rec.left < vpWidth + wPosition.left :
                                            rec.left >= 0 && rec.left <  vpWidth,
            rViz = isContained ?
                                            rec.right - wPosition.left > 0  && rec.right < vpWidth + wPosition.left  :
                                            rec.right > 0 && rec.right <= vpWidth,
            vVisible   = partial ? tViz || bViz : tViz && bViz,
            hVisible   = partial ? lViz || rViz : lViz && rViz;

        if(direction === 'both')
            return clientSize && vVisible && hVisible;
        else if(direction === 'vertical')
            return clientSize && vVisible;
        else if(direction === 'horizontal')
            return clientSize && hVisible;
    } else {

        var viewTop                 = isContained ? 0 : wPosition,
            viewBottom      = viewTop + vpHeight,
            viewLeft        = $w.scrollLeft(),
            viewRight       = viewLeft + vpWidth,
            position          = $t.position(),
            _top            = position.top,
            _bottom         = _top + $t.height(),
            _left           = position.left,
            _right          = _left + $t.width(),
            compareTop      = partial === true ? _bottom : _top,
            compareBottom   = partial === true ? _top : _bottom,
            compareLeft     = partial === true ? _right : _left,
            compareRight    = partial === true ? _left : _right;

        if(direction === 'both')
            return !!clientSize && ((compareBottom <= viewBottom) && 
(compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= 

viewLeft));
        else if(direction === 'vertical')
            return !!clientSize && ((compareBottom <= viewBottom) && 
(compareTop >= viewTop));
        else if(direction === 'horizontal')
            return !!clientSize && ((compareRight <= viewRight) && 
(compareLeft >= viewLeft));
    }
};

})(jQuery);

$(document).ready(function(){
$('a[data-toggle=dropdown]').on('click', function(e){

    e.stopPropagation();
    e.preventDefault();
    $(this).parent().siblings().removeClass('open');
    $(this).parent().toggleClass('open');

    if($(window).width() > 767){

        if($(this).parent('div').hasClass('open')){

            if(!$(this).next('div').visible()){

                console.log('not visible');
                $(this).next('div').addClass('rev');

            }

        }else{
            $(this).next('div').removeClass('rev');
        }

    }

});

});

// ----- END       Keep dropdowns and sub-dropdowns onscreen on small screens 
// ----- END       Keep dropdowns and sub-dropdowns onscreen on small screens 

// ----- BEGIN     live screensize 
// ----- BEGIN     live screensize 
$(window).resize(function() {
       $("#dimensions").html("Page: " + $(window).width() + " x " 
+$(window).height());
}).resize();
// ----- END       live screensize 
// ----- END       live screensize 

スタイル.css:

//class to replace navbar-light    
.navbar-mtw .navbar-toggler {
  color: #415a81 !important;
  border-color: #415a81 !important; }
.navbar-mtw .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

.navbg-mtw {
  background-color: #8ca4d9;
  font-style: bold !important;
  font-size: 1.125rem; }

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

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

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

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}


// for screenwidth detection:
.rev{
  left:auto !important;
  right:100% !important;
  top:8px !important;
  margin-right:-12px !important;
}