Question

我一直在使用Twitter Bootstrap进行下拉菜单，但问题是我使菜单可以移动而不是OnClick切换，是否有可能使这个菜单OnClick切换崩溃像我之前做的那样只能在其他触控设备上使用？

HOVERABLE

<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"

放在一起

所以我想知道是否可以在Touch设备上再次使用Basic！

Answer 1

您可以使用@media查询和CSS中与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。

可以在PC上浏览，但可在其他设备菜单上单击

1 个答案: