可在PC上悬停，但在其他设备菜单上可单击

Question

我一直在使用Twitter Bootstrap进行下拉菜单，但问题是我使菜单变为可悬停而不是OnClick切换，是否有可能使此菜单变为OnClick切换而崩溃，就像我将其变为悬停之前一样仅设备？

可悬停

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="dropdown">
                <a class="nav-link dropdown" href="#">
          Dropdown link
        </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">1</a>
                    <a class="dropdown-item" href="#">2</a>
                    <a class="dropdown-item" href="#">3</a>
                    <a class="dropdown-item" href="#">4</a>
                    <a class="dropdown-item" href="#">5</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

<style>
    .dropdown-menu {}

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
</style>

在基本的引导程序代码中，我们将data-toggle="dropdown"和id="dropdownMenuButton" aria-labelledby="dropdownMenuButton"放入id="dropdownMenuButton" aria-labelledby="dropdownMenuButton"

所以我想知道是否有可能在Touch设备上再次使其成为Basic！

Answer 1

您可以在CSS中使用@media查询和与Bootstrap相同的断点，并且仅将hover应用于非移动设备的断点：

@media only screen and (min-width : 320px) {
    /* Custom, iPhone Retina */    
}

@media only screen and (min-width : 480px) {
    /* Extra Small Devices, Phones */ 
}

@media only screen and (min-width : 768px) {
    /* Small Devices, Tablets */
}

/* Medium Devices, Desktops, Large Devices, Wide Screens */
@media only screen and (min-width : 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

这基于Bootstrap 3断点。 这将导致悬停仅在大于992px屏幕上992px 。

可在PC上悬停，但在其他设备菜单上可单击

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-31 15:10:38

可在PC上悬停，但在其他设备菜单上可单击

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-31 15:10:38

解决方案1
1 已采纳 2017-01-31 15:10:38