css - 带有点击和显示下拉菜单的 Bootstrap 菜单，适用于 768 像素和 1099 像素的屏幕尺寸

Question

我正在使用 bootstrap 作为下拉菜单，目前如果屏幕尺寸超过 768 像素；当您将鼠标悬停时会出现下拉菜单，如果它低于 768PX，则当您单击菜单项时会出现下拉菜单。太完美了。

但我希望屏幕尺寸为 768-1099px，它不应该悬停。它应该被点击并且下拉菜单应该显示为移动版本。

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">TutorialsPoint</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">Separated link</a></li>
               <li class="divider"></li>
               <li><a href="#">One more separated link</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

Answer 1

您可以轻松做到这一点:http://www.bootply.com/114896

只需将该 CSS 包装在您想要定位的任何大小的媒体查询中，例如:

@media (min-width: 992px) and (max-width: 1099px) {
    .navbar-header {
      float: none;
    }
    .navbar-toggle {
      display: block;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
      display: none!important;
    }
    .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
    }
    .navbar-nav>li {
      float: none;
    }
    .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
}

谢谢