简体   繁体   English

Bootstrap导航项未出现在移动设备中

[英]Bootstrap nav items not appearing in mobile

I'm having a frustrating issue with bootstrap's mobile navigation. 我在使用bootstrap的移动导航时遇到了令人沮丧的问题。 The issue is that the menu items are not appearing after clicking the button for display. 问题是单击显示按钮后菜单项没有出现。 I've tried several fixes on two different phones with no result. 我已经尝试在两部不同的手机上进行了数次修复,但都没有结果。

The first fix was adding the below code as mentioned on http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/ though this is for version 2.3.2. 第一个修补程序是添加以下代码,如http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/所述,尽管此代码适用于版本2.3.2。 I also used the previous code with no results. 我也使用了先前的代码,但没有结果。

      $('.dropdown-toggle').click(function(e) {
           e.preventDefault();
           setTimeout($.proxy(function() {
        if ('ontouchstart' in document.documentElement) {
           $(this).siblings('.dropdown-backdrop').off().remove();
         }
        }, this), 0);
      });

The second effort was removing 第二项努力是去除

    if ('ontouchstart' in document.documentElement) {
      $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
    }

From the bootstrap minified js doc. 从引导程序缩小的js文档中。

The code for the navbar itself is below, the main edit being the removal of the container though it didn't work even with the container present. 导航栏本身的代码如下,主要编辑是删除容器,尽管即使存在容器也无法正常工作。 I can't figure this out for the life of me, your help is appreciated. 我一生都无法解决,感谢您的帮助。

  <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navigation-toggle"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> 

Forget other manual fixing because bootstrap have it own. 忘记其他手动修复程序,因为引导程序拥有它。 Just simply call JS_FILE_PATH/bootstrap.min.js after calling any standard jQuery version. 在调用任何标准jQuery版本之后,只需简单地调用JS_FILE_PATH / bootstrap.min.js Remember bootstrap.min.js will not work if you do not call jquery before it. 请记住,如果不先调用bootstrap.min.js,它将无法正常工作。

I hope this'll solve your issue. 希望这能解决您的问题。 I tried this on my own. 我自己尝试过。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM