ASP MVC Bootstrap 导航下拉菜单：悬停在大屏幕上，单击小屏幕

Question

我正在使用标准 Bootstrap class="nav navbar-nav" 来使用下拉菜单进行导航：

<ul class="nav navbar-nav">
    <li role="presentation" class="@Html.IsSelected("Appointments", "selected")">
        <a data-toggle="dropdown" href="#"><img src="/Content/images/nav_appts.png" style="padding: 0px 5px 3px 0px;">Appointments<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li>@Html.ActionLink("Appointments Page 1", "Index", "Appointments")</li>
            <li>@Html.ActionLink("Appointments Page 2", "Page2", "Appointments")</li>
        </ul>
    </li>
    // more menu items
</ul>

开箱即用的下拉菜单只有在您单击它们时才会出现。如果你悬停，我找到了一种让它们出现的方法。在 css:

/* causes the dropdowns to be displayed on-hover instead of on-click */
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block; 
}

这在标准大屏幕上效果很好。但是一旦屏幕变成平板电脑大小，导航就会切换到带有下拉条以显示导航的框。一旦我们到达这里，我不希望子菜单项出现在悬停时。我知道在大多数平板电脑上，'hover' 的概念不存在，因为没有鼠标。 None 越少，以防有人用非常小的笔记本电脑（等等）使用该网站，我希望能够控制它。我试过这个：

@media screen and (max-width: 830px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: inline; 
     }
}

我尝试了一些其他选项，但似乎无法正确选择。

Answer 1

使用两个宽度不同的规则，以便根据屏幕尺寸应用每个规则：

@media screen and (min-width: 831px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block; 
     }
}

@media screen and (max-width: 830px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: inline; 
     }
}

ASP MVC Bootstrap 导航下拉菜单：悬停在大屏幕上，单击小屏幕

ASP MVC Bootstrap Navigation Dropdowns: Hover on Large Screen, Click on Small

navigation

asp.net-mvc

twitter-bootstrap

drop-down-menu