Jquery mmenu 从 bootstrap 4 布局中退出

Question

如果我放大我的页面，或者我在 responsinator.com 中查看它，有时，或者在横向 View 中，菜单不会折叠到移动版本。

我正在使用 jquery mmenu plugin和 bootstrap 4 证明了 nav。

我试着删除对齐的类，但它仍然有同样的问题，而且，我需要对齐的菜单。对于菜单，我没有任何自定义 CSS，只有颜色、字体大小...

You can take a look at my page here.

<div class="site_navigation">
    <div class="navbar navbar-expand-sm">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">
                    <i class="fas fa-bars navbar_ikon"></i>
                </span>
        </button>
        <div class="collapse navbar-collapse" id="menu">
            <ul class="navbar-nav nav-justified w-100 container mr-auto">

                <li class="nav-item dropdown">
                    <a href="/kategoria/1/barabas-terko" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Barabás térkő</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/kategoria/6/barabas-terko/barabas-badacsony-terko">Barabás Badacsony térkő</a>
                        <a class="dropdown-item" href="/kategoria/7/barabas-terko/barabas-gerecse-terko">Barabás Gerecse térkő</a>
                        <a class="dropdown-item" href="/kategoria/5/barabas-terko/barabas-somlo-trio-terko">Barabás Somló Trió térkő</a>
                        <a class="dropdown-item" href="/kategoria/8/barabas-terko/barabas-teglako">Barabás Téglakő</a>
                    </div>
                </li>

                <li class="nav-item"><a href="/kategoria/36/kerti-szegely" class="nav-link">Kerti szegély</a></li>

                <li class="nav-item dropdown">
                    <a href="/kategoria/10/terko-meret-szerint" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Térkő méret szerint</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/kategoria/15/terko-meret-szerint/10x20-cm-terko">10x20 cm térkő</a>
                        <a class="dropdown-item" href="/kategoria/18/terko-meret-szerint/20x13-3-cm-terko">20x13,3 cm térkő</a>
                        <a class="dropdown-item" href="/kategoria/19/terko-meret-szerint/vegyes-meretu-kombi-terko">Vegyes méretű, kombi térkő</a>
                    </div>
                </li>

                <li class="nav-item dropdown">
                    <a href="/kategoria/9/terko-vastagsag-szerint" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Térkő vastagság szerint</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/kategoria/11/terko-vastagsag-szerint/4-cm-vastag-terko">4 cm vastag térkő</a>
                        <a class="dropdown-item" href="/kategoria/12/terko-vastagsag-szerint/5-cm-vastag-terko">5 cm vastag térkő</a>
                        <a class="dropdown-item" href="/kategoria/13/terko-vastagsag-szerint/6-cm-vastag-terko">6 cm vastag térkő</a>
                        <a class="dropdown-item" href="/kategoria/14/terko-vastagsag-szerint/8-cm-vastag-terko">8 cm vastag térkő</a>
                    </div>
                </li>

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

当我在平板电脑或手机上查看页面时，我不想看到菜单，只想看到菜单 toggler-icon。

Answer 1

目前，在任何低于 578 像素的分辨率下，导航将通过汉堡菜单转换...但是由于您希望完整的导航在平板电脑上消失...您必须将类从 <div class="navbar navbar-expand-sm"> 更改为从 <div class="navbar navbar-expand-md"> 进入

工作代码段当前的导航以及您需要的导航:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Current Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br />
<br />
<div class="container">
  <h3>Navigation which you need below</h3>
</div>


<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar you want</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>