Asp.net mvc ASP MVC引导导航下拉菜单：悬停在大屏幕上，单击小屏幕

我使用标准引导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>

这在标准大屏幕上非常有效。但一旦屏幕变为平板电脑大小，导航就会切换到带有向下显示导航条的方框。一旦我们到达这里，我不希望子菜单项出现在悬停状态。我知道在大多数平板电脑上，“悬停”的概念并不存在，因为没有鼠标。尽管如此，如果有人使用一个非常小的笔记本电脑（等）的网站，我想能够控制这一点。我试过这个：

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

---

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

使用两个不同宽度的规则，因此每个规则都适用于不同的屏幕大小：

@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; 
     }
}

---

使用两条不同宽度的规则，以便根据屏幕大小应用每一条规则：

@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; 
     }
}

---

---

您是否尝试过

@媒体屏幕和（最小宽度：830px）{…display:block

？display:block就是让它出现在悬停状态的东西。我想要相反的结果。所以如果你在

block

规则中添加

min width

，并使用

max width

和

inline

规则，这不就是你需要的吗？啊，好的……让我试试看！如果你添加答案，我会把它标记为c正确。谢谢！您是否尝试过

@媒体屏幕和（最小宽度：830px）{…display:block

？display:block就是让它出现在悬停状态的东西。我想要相反的结果。所以如果你在

block

规则中添加

min width

，并使用

max width

和

inline

规则，这不就是你需要的吗？啊，好的……让我试试看！如果你添加答案，我会把它标记为c正确。谢谢！您是否尝试过

@媒体屏幕和（最小宽度：830px）{…display:block

？display:block就是让它出现在悬停状态的东西。我想要相反的结果。所以如果你在

block

规则中添加

min width

，并使用

max width

和

inline

规则，这不就是你需要的吗？啊，好的……让我试试看！如果你添加答案，我会把它标记为c正确。谢谢！出于某种原因，如果我给元素任何类型的显示，内联或块，它会显示在悬停状态。所以解决方案是保留第一个@media，而不使用第二个。谢谢！出于某种原因，如果我给元素任何类型的显示，内联或块，它会显示在悬停状态。所以解决方案结束了保留第一个@media，而不使用第二个。谢谢！好吧，出于某种原因，如果我给元素任何类型的显示，内联或块，它会显示为悬停。所以解决方案是保留第一个@media，而不使用第二个。谢谢！