bootstrap的下拉菜单在手机中无法使用，为什么？

发布于 2022-08-26 16:37:17 字数 3638 浏览 16 评论 0

　　正在学习bootstrap，发现将下拉菜单置于导航条中时，在电脑上无论放大缩小浏览器尺寸，用鼠标点击各链接，都能正常使用。
　　但当用手机浏览时，只能点击到导航条的链接，下拉菜单内的链接无法使用。
　　如果觉得我没说清楚的，可以用手机浏览http://www.bootcss.com/examples/hero.html，然后点击“dropdown”，就会发现这个下拉菜单内的那些“action”之类的子菜单链接无效。
　　请问这种情况该如何解决呢？又遇到一个奇怪的问题了，就是如果我引用的是 <script src="//cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 那么dropdown就可以用，但如果把这个库文件下载到本地再引用，就不行了。原代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>首页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- Le styles -->
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="include/img/logo144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="include/img/logo114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="include/img/logo72.png">
    <link rel="apple-touch-icon-precomposed" href="include/img/logo57.png">
    <link rel="shortcut icon" href="include/img/logo32.png">
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
          <a class="brand form-inline" href="index.php">测试</a>
            <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav pull-right">
                    <li class="dropdown" id="UserLoginStatus">
                    <a class="dropdown-toggle" id="userLabel" role="button" data-toggle="dropdown" data-target="#">13851883589<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="userLabel"><li><a href="myGroup.php">我的通讯录</a></li><li><a href="EventByMe.php">我的朋友</a></li><li><a href="user_change.php">帐户信息</a></li><li class="divider"></li><li type="logout"><a href="#">退出</a></li></ul>                    </li>
                    <li><a href="about.php">关于本站</a></li>
               </ul>
            </div><!-- /.nav-collapse -->
          </div>
      </div>
    </div>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="//cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

分享到QQ

分享到微博