响应式bootstrap-navbar中的下拉列表

时间:2013-03-14 16:21:42

标签: css drop-down-menu twitter-bootstrap navbar

我使用bootstrap中的(响应)导航栏。如果浏览器大小处于“响应”状态( - >较小,以便出现nav-btn),我想阻止弹出下拉菜单。

问题:当列出子项时,菜单需要很大的空间。我找不到任何有用的东西。

的Src:

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

1 个答案:

答案 0 :(得分:0)

这有效:

$(window).resize(function() {

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

});