Disable bootstrap dropdown

Question

Я использую загрузочную навигационную навигацию с выпадающим списком. Когда сайт отображается на маленьком экране, я хочу отключить раскрывающийся список и включить гиперссылку за кнопкой выпадающего меню.

Я уже добавил отключенный класс к кнопке переключения, но как я могу заставить его работать только тогда, когда @media (max-width: 480px)?

Здесь вы можете найти test page

<div class="row nav_row mobile"> 
     <ul class="nav nav-pills dropdown nav_responsive"> 
      <li><a class="dropdown-toggle collapse-btn">Menu<span class="caret"></span></a></li> 
     </ul> 
     <div class="nav-collapse"> 
      <ul class="nav nav-pills"> 
       <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Vakanties <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Binnenland</a></li> 
         <li><a href="#">Buitenland</a></li> 
         <li><a href="#">Inleefreizen</a></li> 
         <li><a href="#">Gezondheidsreizen</a></li> 
        </ul> 
       </li> 
       <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Vormingen <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Monitor</a></li> 
         <li><a href="#">Hoofdmonitor</a></li> 
         <li><a href="#">Instructeur</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Gezondheid</a></li> 
       <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Internationaal <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">EVS</a></li> 
         <li><a href="#">Groepsuitwisselingen</a></li> 
         <li><a href="#">Trainingscursussen</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Projecten</a></li> 
       <li class="clearfix"><a href="#">Actueel</a></li> 
      </ul> 
      <div style="clear:left"></div> 
     </div> 
    </div> 

Answer 1

я нашел приемлемый ответ. С небольшой помощью JQuery

$(document).ready(function() { 
    function checkWidth() { 
     var windowSize = $(window).width(); 
     if (windowSize > 480) { 
      $('.disabled').removeClass('disabled').addClass('enabled'); 
     } else if (windowSize <= 479) { 
      $('.enabled').removeClass('enabled').addClass('disabled'); 
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
}); 

Answer 2

У меня была проблема с использованием Bootstrap Responsive Utilities, чтобы отображать и скрывать выбранные div. Таким образом, в основном я создал два меню - одно видимое только с экраном XS, а другое - во всех других размерах экрана.

<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-12 column"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Brand</a> 
       </div> 
       <div class="hidden-xs"> 
        <ul class="nav navbar-nav navbar-right"> 
         <!-- NAVBAR ITEMS FOR LARGER THAN XS SCREENS --> 
        </ul> 
       </div> 
       <div class="visible-xs hidden-sm hidden-md hidden-lg"> 
        <div class="collapse navbar-collapse" id="mycollapse"> 
         <ul class="nav navbar-nav navbar-right"> 
          <!-- NAVBAR ITEMS FOR XS SCREEN --> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 
    </div> 
</div> 

Answer 3

.dropdown-menu { 
    border: 0 none; 
    display: block; 
    float: none; 
    font-size: 14px; 
    padding: 5px 19px; 
    position: static; 
    text-align: none; 
}