Dropdown in responsive bootstrap-navbar

Question

我使用bootstrap中的（自适应）导航栏。如果浏览器大小处于“响应”模式（ - >较小，以便出现nav-btn），我想阻止我的下拉菜单弹出。

问题：菜单占用很多空间，当子项列出时。我找不到任何有用的东西。

源：

<div class="navbar navbar-fixed-top" align="right" style="border:1px solid #EFEFEF;"> <!-- --> 
    <div class="navbar-inner"> 
    <div class="containerr" align="center"> 
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"><font size="+1" color="#FFA500">Menu</font></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 

     </button>  

     <table width="100%" border="0" cellpadding="0" cellspacing="2"> 
     <tr> 
     <td align="left" valign="middle"><a href="http://www.abc.com"> <img alt="" src="img/logo.jpg"/></a></td> 
     <td align="left" valign="middle"><div class="font-effect-3d-float obenrechts">Slogan</div></td> 
     </tr> 
     </table> 

     <div class="nav-collapse"> 

     <ul class="nav"> 

      <li class="active"><a href="home.html" target="mainframe" class="activator">Home</a></li> 
      <li class="divider-vertical"></li> 

      <li class="dropdown" id="iddropdown"> 
      <a href="service.html" class="dropdown-toggle activator" data-hover="dropdown" target="mainframe" id="idservice"> 
      Service </a> 
      <ul class="dropdown-menu"> 
       <li><a target="mainframe" href="service.html#1" class="activator">Option 1</a></li> 
       <li><a target="mainframe" href="service.html#2" class="activator">Option 2</a></li> 
      </ul> 
      </li> 

     </tr> 
     </table> 
     </a></li> 
     </ul> 
     </div><!-- /.nav-collapse --> 
     </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
    </div><!-- /.navbar --> 

Answer 1

这个工程：

$(window).resize(function() { 

    if ($(window).width() < 980) { 
     $("#iddropdown").removeClass("dropdown"); 
    } 
    else if (!$("#iddropdown").hasClass('dropdown')) 
    { 
     $("#iddropdown").addClass("dropdown"); 
    } 

});