Twitter Boostrap仅适用于桌面版本类

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

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

来源

2015-06-20 Einius

我想，你应该使用媒体CSS如下，来实现这一点。这样做会更容易。

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

对于其他屏幕尺寸只是给出必须应用的默认样式。尝试一下。

UPDATE

您可以添加使用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 href="somePath" class="dropdown-toggle newClass" data-toggle="dropdown">DropDown</a>

来源

2015-06-20 18:41:31 Lal

.disabled类是默认的引导类。我相信这意味着我必须修改它，这不会是一个干净的解决方案，或者我错了吗？ – Einius

干净的解决方案...我认为，这是依赖..：D ..如果你需要它，你应该覆盖它.. – Lal

还有一个问题。该类在bootstrap.js中用于我需要的效果。而只是用@media覆盖这个类根本就不会工作 – Einius

Twitter Boostrap仅适用于桌面版本类

回答

相关问题