Twitter Bootstrap 仅适用于桌面版本

Question

我有 Bootstrap 下拉菜单。在桌面版本上，我希望它是可点击的。通过可点击，我的意思是它不仅可以作为下拉菜单，而且可以作为普通按钮。如果用户将鼠标悬停在它上面，它将展开其他菜单，但如果用户点击它，它将重定向到另一个页面。这就是为什么它应用了.disabled 类。但是我不希望在用户使用移动设备时应用这个类，所以如果用户点击它，它只会展开。这就是为什么我需要 .disabled 类仅适用于桌面的原因。有什么方法可以实现吗？

<li class="dropdown">
   <a href="somePath" class="dropdown-toggle disabled" data-toggle="dropdown">DropDown</a>
   <ul class="dropdown-menu">
       <li><a href="#">menu1</a></li>
       <li><a href="#">menu2</a></li>
   </ul>
</li>

Answer 1

我认为，您应该使用下面的媒体 css 来完成此操作。这会更容易做到。

@media (min-width: 990px){
    .disabled {
    //do your styles here
    }
}

对于其他屏幕尺寸，只需提供必须应用的默认样式。试试看。

更新

如果屏幕很大，可以使用 JavaScript 动态添加 disabled 类，如下所示

function resize() {
    if ($(window).width() > 990) {
     $('.newClass').addClass('disabled');
    }
    else {$('.newClass').removeClass('disabled');}
}

并将$(document).ready()中的函数调用为

$(document).ready( function() {
    $(window).resize(resize);
    resize();
});

另外，在尝试这个的时候，别忘了给<a>添加一个类，这样它就变成了

<a href="somePath" class="dropdown-toggle newClass" data-toggle="dropdown">DropDown</a>