相关疑难解决方法(0)

这不是子菜单下拉列表,类别是图片中的类li:

通过从响应式菜单中选择一个类别(模板只是一个页面),我想在点击时自动隐藏导航折叠.也可以漫步用作导航,因为模板只有一个页面.我寻求一个不影响它的解决方案,这里是菜单的HTML代码:

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

如何将 Bootstrap 5 导航栏项目向右对齐？在 Bootstrap 3 中，它是navbar-right. 在 Bootstrap 4 中，它是ml-auto. 但不适用于 Bootstrap 5。

我正在寻找一种让Twitter Bootstrap手机/平板电脑导航器在点击菜单链接后自动隐藏/折叠的方法.我有很多菜单项,因此当用户在iPhone中展开菜单时,他们只看到菜单而不是下面的页面.当用户点击菜单链接时,这会让用户感到困惑,因此点击后似乎没有发生任何事情.

非常感谢并拥抱能够指引我朝着正确方向前进的人!

如果您使用Twitter-Bootstrap网站并将窗口大小缩小到1024x768以下,导航将变为您单击的图标.这是一个javascript插件吗？如何让我的网站做同样的事情？

编辑

我试图编写一个响应式菜单。它实际上是可行的，但是我无法在CSS中获得on clik效果。目前，我正在使用悬停。当屏幕宽度小于750像素时，如何使它变大，我必须单击图片上的菜单。2（ul）以显示图片菜单。第3个（li）？这是一个一页网站，因此当我从下拉菜单中单击某个元素时，它应该隐藏菜单agin（li）。

HTML：

<header>
    <nav id="menu">
        <ul>
            <li class="li"><a href="#">WITAJ</a></li>
            <li class="li"><a href="#">O MNIE</a></li>
            <li class="li"><a href="#">DO?WIADCZENIE</a></li>
            <li class="li"><a href="#">CO ROBI??</a></li>
            <li class="li"><a href="#">KONTAKT</a></li>
            <li><a href="#">MOJE PRACE</a></li
        ></ul>
    </nav>
</header>

CSS：

@media screen and (max-width: 750px) {      
    header nav#menu ul:hover > li{
        display:block !important;
    }

    header nav#menu ul li{
        display:none !important;
    }
}

我有一个汉堡包菜单几乎完成只有1个错误/问题,我无法弄清楚.我的导航链接到主页上的不同区域.因此,在主页上,用户可以单击导航链接,该链接将立即将其下移到页面上的所需位置.

我的问题是因为没有加载所以一旦用户点击导航链接他们被带到该位置但下拉菜单将不会关闭.我尝试在JS中添加.hide,它隐藏了点击链接的下拉列表,但这创建了我的新问题.

用户单击其中一个导航链接后,它会隐藏菜单,但再次单击菜单图标时,菜单根本不会打开.在开发工具中,我看到在点击其中一个导航链接时,它被赋予了显示风格:无,所以我觉得问题可能就在那里.感谢您的帮助,如果需要任何其他信息,请告诉我们!

HTML:

     <nav class="navbar navbar-light navbar-fixed-top">
     <div class="wrapping container-fluid">
        <div class="hamburger">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      <ul class="nav navbar-nav float-sm-right mr-0 menu">
        <li class="nav-item">
          <span class="sr-only"></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#workshops">Workshops</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#locations">Location</a>
        </li>
        <li class="nav-item">
          <a class="nav-link last-link" href="#register">Register</a>
        </li>
      </ul>
      <a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
    </div>
  </nav>

这个菜单的CSS:

.menu{
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.open{
  height: 295px;
} …