引导程序无法在移动设备上使用

问题描述：

该下拉菜单在移动设备上无法使用。我到处寻找，并尝试其他人提到的，但似乎没有任何工作。谁能帮忙？引导程序无法在移动设备上使用

我不确定它有什么问题，真的需要这个工作，因为大多数用户似乎访问移动版本。

下面的代码：

<div class="top1"> 
<div class="container"> 
<div class="row"> 
<div class="span12"> 
<div class="navbar navbar_"> 
    <div class="navbar-inner navbar-inner_"> 
     <a class="btn btn-navbar btn-navbar_" data-toggle="collapse" data-target=".nav-collapse_"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>  </a> 
     <div class="nav-collapse nav-collapse_ collapse"> 
      <ul class="nav sf-menu clearfix"> 
       <li class="active"><a href="index.html">Home</a></li>    
       <li><a href="about.html">About</a></li>       
       <li class="sub-menu sub-menu-1"><a href="media.html">Media<em></em></a> 
        <ul>       
         <li class="sub-menu sub-menu-2"><a href="/films/">Film<em></em></a> 
          <ul> 
           <li><a href="/films/">Released</a></li> 
           <li><a href="/films/inproduction.html">In Production</a></li> 
           <li><a href="/films/indevelopment.html">In Development</a></li> 

          </ul> 

         </li> 
         <li><a href="/music/">Music</a></li> 
         <li><a href="/publishing/">Publications</a></li>                  
        </ul>      
       </li> 
       <li><a href="whatwedo.html">What We Do</a></li> 
       <li><a href="/blog">News</a></li>                 
       <li><a href="contact.html">Contact</a></li> 
<div align="right"><script type="text/javascript"> 
<!-- 
var months = new Array(
"January", "February", "March", "April", 
"May", "June", "July", "August", "September", 
"October", "November", "December"); 
var currentTime = new Date(); 
var month = currentTime.getMonth(); 
var day = currentTime.getDate(); 
var year = currentTime.getFullYear(); 
document.write(months[month] + " " + day + ", " + year); 
//--> 
</script></div>           
      </ul> 
     </div> 
    </div> 
</div> 
</div> 
</div> 
</div>

确保导入了jQuery库，它是用来做下拉菜单等。 – Phantom 2015-04-03 04:55:15

答

的（引导）HTML文件的结构：

<!DOCTYPE html> 
<html lang=""> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title Page</title> 
    <!-- Bootstrap CSS --> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <!-- YOUR CONTENT HERE --> 
    <!-- jQuery --> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <!-- Bootstrap JavaScript --> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</body> 
</html>

bootstrap.min.css必须被包括在<head>部（<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> ）
jQuery和bootstrap.min.js必须包含在<body>部分的末尾。（<script src="http://code.jquery.com/jquery.js"></script><script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>）
第一个 jQuery，比bootstrap.min.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" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Title</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav"><!-- navbar-right --> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Media <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Film</a> 
         <ul> 
          <li><a href="#">Released</a></li> 
          <li><a href="#">In Production</a></li> 
          <li><a href="#">In Development</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Music</a></li> 
        <li><a href="#">Publications</a></li> 
       </ul> 
      </li> 
      <li><a href="#">What we do</a></li> 
      <li><a href="#">News</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
</nav>

你的项目包括（主页，关于，媒体，...）。要设置导航栏的右侧添加类导航栏右

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-rigth">

http://jsfiddle.net/z06pgqn9/

引导程序无法在移动设备上使用

相关推荐