Question

我知道移动视图中没有悬停。但是当我从浏览器测试手机大小时，最好删除悬停。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sports</a>
          <ul class="dropdown-menu">
            <li><a href="#">Football</a></li>
            <li><a href="#">Basketball</a></li>
            <li><a href="#">Tennis</a></li>
            <li><a href="#">volleyball</a></li>
          </ul>
        </li>
        <li><a href="#">DEVELOPMENTS</a></li>
        <li><a href="#">OUR TEAM</a></li>
        <li><a href="#">LOGIN</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->

我正在使用此代码使下拉菜单仅在悬停在尺寸＆gt;时出现767px。

/* drop down menu hover*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}
/* close drop down menu on focus */
.open>.dropdown-menu{
    display:none;
}

Answer 1

使用CSS媒体查询：指定目标设备的大小。因此，在您的示例中，我假设小于767的屏幕用于设备，因此我们将此值设置为max-width。

@media only screen and (max-width: 767px) {
  /* drop down menu hover for device */
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: none;    
   }
}

bootstrap如何删除移动视图中的下拉菜单上的悬停？

1 个答案: