如何使Bootstrap下拉菜單在懸停時起作用

Question

如何使bootstrap下拉菜單與懸停一起使用，分辨率大於767px。

我看到了這樣的問題如何在懸停而不是單擊上使twitter引導菜單下拉菜單 ，這表明

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

但是問題是，我只能在大於767px的分辨率上禁用點擊效果。 即低於此分辨率（尤其是在移動設備中），它必須在引導程序通常會執行的單擊操作下工作。

到目前為止我嘗試過的

使CSS對此

ul.nav li.dropdown:hover > ul.dropdown-menu,
ul.nav li.dropdown:active > ul.dropdown-menu 
{
    display: block;    
}

並更改

<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"/>

至

<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle=""/>

現在，它禁用分辨率> 767px的單擊，並且還可以在分辨率<767px的情況下運行click事件，這里的問題是，分辨率低於767px時，它不能像以前那樣完美地工作。

這是我能找到的最接近的地方，任何幫助都將不勝感激。

Answer 1

您可以使用媒體查詢包裝CSS代碼：

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

要禁用，請單擊：

$('.nav .dropdown > a').click(function(event){
    event.preventDefault();
});