【问题标题】:Bootstrap nav items not appearing in mobile引导导航项目未出现在移动设备中
【发布时间】:2014-12-01 13:00:51
【问题描述】:

我在使用 bootstrap 的移动导航时遇到了一个令人沮丧的问题。问题是单击显示按钮后菜单项未出现。我在两部不同的手机上尝试了多次修复,但没有任何结果。

第一个修复是添加以下代码,如 http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/ 中所述,尽管这是针对版本 2.3.2。我也用了之前的代码,没有结果。

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

第二个努力是移除

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

来自引导缩小的 js 文档。

导航栏本身的代码如下,主要编辑是删除容器,尽管即使存在容器也无法正常工作。我这辈子都想不通,感谢您的帮助。

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

【问题讨论】:

  • 只需从Bootstrap Navbar 复制代码,然后确保链接到引导程序的依赖项jQuerybootstrap.min.js
  • 尝试用&lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;替换行&lt;div class="collapse navbar-collapse" id="navigation-toggle"&gt;
  • @Rafael 如下所述,原始未编辑的导航栏有效,但是当我删除除navbar-right 类之外的所有链接时,此问题存在。
  • @Banzay 的 id 以及 data-target 已经更新,即使是原来的标题效果还是一样的。

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

忘记其他手动修复,因为引导程序有它自己的。只需在调用任何标准 jQuery 版本后调用 JS_FILE_PATH/bootstrap.min.js 即可。请记住,如果您在 bootstrap.min.js 之前不调用 jquery,它将无法工作。

希望这能解决您的问题。我自己试过了。

【讨论】:

  • 这并没有解决问题,但是它适用于 getbootstrap.com 的原始链接,只有当我删除除使用 navbar-right 类设置的链接之外的所有链接时,该问题才会生效。
猜你喜欢
  • 2018-09-29
  • 1970-01-01
  • 2016-09-02
  • 2019-05-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-11
  • 1970-01-01
相关资源
最近更新 更多