将Bootstrap导航栏和内容转换为rtl

Question

我正在尝试将以下导航栏方向和子菜单的行为转换为另一个方向。

这是原始代码，下面是经过修改的代码，需要更多调整才能“从右到左”：

原始文件：

// dropdown menu on hover 
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {

  $(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
  $(this).bind('mouseleave', function() {

    $(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
  });
});

//Change position for drop down
$(function() {
  $(".dropdown li").on('mouseenter mouseleave', function(e) {
    if ($('.dropdown-menu', this).length) {
      var elm = $('.dropdown-menu', this);
      var off = elm.offset();
      var l = off.left;
      var w = elm.width();
      var docW = $(window).width();

      var isEntirelyVisible = (l + w <= docW);

      if (!isEntirelyVisible) {
        $(elm).addClass('dropdown-reverse');
      } else {
        $(elm).removeClass('dropdown-reverse');
      }
    }
  });
});

.dropdown-menu {
  margin-top: -2px;
}

li.dropdown .dropdown-menu .dropdown-menu {
  left: 100%;
  margin-top: -30px;
}

.dropdown-reverse {
  left: auto!important;
  right: 100%!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">


<nav id="menu" class="navbar navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

我编辑了上面的内容，并在CSS中添加了.navbar{float: right; }，在text-align:right中添加了li dropdown，并在html中dir="rtl"的顶行中添加了nav。但是行为仍然不是预期的，因为rtl css的添加使它失去了对屏幕尺寸的尊重，因为该图像（这是原始图像）：

但是现在它只打开前两个右菜单，但是第三个子菜单在第一个子菜单上打开。

这里是测试的小提琴：https://jsfiddle.net/2b8h30Lx/41/