Twitter Boostrap apply class only for desktop versions

Question

I have Bootstrap dropdown menu. On desktop versions I want it to be clickable. By clickable I mean not only it to work as dropdown but also as a normal button. If users hovers on it it will expand others menu but if user clicks on it it will redirect to another page. That is why it has .disabled class applied. But I don't want this class to be applied when user is using mobile device so if a user clicks on it it will only expand. Thats the reason why I need .disabled class to be applied only for desktops. Is there any way to achieve this?

<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

I think, you should use media css as below, to accomplish this. This would be easier to do.

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

and for the other screen sizes just give the default styles that has to be applied. Try it.

UPDATE

You can add the class disabled dynamically using JavaScript, if the screen size is large, as below

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

and call the function in $(document).ready() as

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

Also, while trying this, dont forget to add a class to the <a> such that it becomes

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