Bootstrap 4响应式菜单-折叠时添加项目

Question

我在网站上使用Bootstrap 4的导航栏显示主菜单。

我还有另一个div（.social-navbar），其中包含一些其他菜单项，我想从这些菜单项中移出这些菜单项，并将INTO引导程序菜单仅放在手机上。 基本上，当菜单在移动设备上折叠时，我希望social-navbar项（facebook / twitter图标）和LOGIN按钮出现在Bootstrap的navbar-nav菜单内。

请参阅下面的Codepen ...

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

  <div class="social-navbar clearfix">
     <ul class="social-icons">
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
     </ul>
     <ul class="login float-right">
        <li class="join"><a href="#">Join Now</a></li>
     </ul>
  </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">LOGO</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMain">
        <ul class="navbar-nav ml-auto">
           <li class="nav-item active">
              <a class="nav-link" href="#">Item 1</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 2</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 3</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 4</a>
           </li>
        </ul>
     </div>
  </nav>

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

这可能吗？

Answer 1

您可以在BODY标签的最后添加此javascript：

<script>

    var x = window.matchMedia("(max-width: 465px)")

    function mobileMenu(x) {
        if (x.matches) { 
            document.getElementById("navbarMain").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "inherit";

        } else{
            document.querySelector("body").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "#000";
        } 
    }

    mobileMenu(x) 
    x.addListener(mobileMenu)   


</script>

当屏幕宽度为465像素或更窄时， .social-navbar将被移到导航栏折叠菜单中，并且其backgroundColor更改为与折叠菜单匹配。