Bootstrap 4导航未按预期调整大小

Question

当我在台式机上加载导航时，导航看起来完全符合预期。但是，当我尝试调整大小时，我希望大型菜单像往常一样缩小为移动菜单。然后，我希望下拉列表链接下面没有下拉按钮，而是希望导航栏几乎滚动到右侧，并带有选项。

    <div class="fixed-top navbar navbar-light bg-light navbar-expand-md">
     <div class="container">
    <a class="navbar-brand float-left" href="/">
      <img class="float-left" src="image.jpg" height="45" width="100" 
     alt="AltTextHere">
        </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">

        <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><strong>About</strong></a>
          <ul class="dropdown-menu megamenu">
            <li class=" navTextContainer">
              <div class="row navDiv">
                <div class="col-md-6 NavTextHeader">
                  <strong>RandomTextHere</strong>
                </div>
                <div class="col-md-2 col-sm-0"></div>
                <div class="col-md-3 weight-300 line-height-10 pt-5">
                  <ul>
                    <li class="dropdown-header"><a href="#">About Us<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>
                    <li class="dropdown-header"><a href="#">Careers<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>
                    <li class="dropdown-header"><a href="#">Advertising<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>

                  </ul>



               </div>

              </div>

            </li>

          </ul>
        </li>
        <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><strong>Link 1</strong></a>
          <ul class="dropdown-menu megamenu">
            <li class=" navTextContainer">

              <div class="row navDiv">
                <div class="col-md-5">
                  <ul class="list-unstyled pt-1">
                    <li class="NavTextHeader"><strong>RandomTextHere</strong> </li>

                    <li class="NavTextHeader"><strong>RandomTextHere </strong> </li>

                  </ul>
                </div>
                <div class="col-md-1 col-sm-0"></div>
                <div class="col-md-5 weight-300 pt-5 line-height-10">
                  <ul>
                    <li class="dropdown-header"><a href="#">Link 1<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1
                                        <p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1
                                            <p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1
                                            <p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>

                  </ul>
                </div>

              </div>
              <div class="row navDiv">
                <div class="col-md-5">
                  <ul class="list-unstyled list-inline pt-1">
                    <li class="NavTextHeader list-inline-item"><a href="#">Link 1 <i class="fas fa-caret-right"></i></a></li>

                    <li class="NavTextHeader list-inline-item pl-5"><a href="#"> Link 1 <i class="fas fa-caret-right"></i></a></li>

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

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

  </div>
</div>

https://codepen.io/anon/pen/gybYeg

这是我当前代码的代码笔。

谢谢

我尝试了各种媒体查询，但似乎没有任何作用。