禁用引導程序下拉列表

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響應實用工具來顯示和隱藏選定的divs類似的問題。所以基本上我創建了兩個菜單 - 一個僅在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; 
}