Question

我使用bootstrap和jquery编写了一个可折叠的导航栏，它在我的桌面上本地工作正常，但是一旦我将它上传到互联网上就不会崩溃。既不显示按钮也不再显示链接。我在Safari 6.1.2，Firefox 43.0.2和谷歌Chrome版本47.0.2526.106（64位）上尝试过它。

如前所述，桌面上的一切正常。但是，iPad上的链接开始崩溃，并且它在我的iPhone上完全不起作用（既没有折叠导航栏也没有链接）（Safari，JavaScript已启用）。

我已经检查了一个到mobile-jquery-version的脚本链接，在bootstrap.js之前放了jquery.min.js，所有脚本都在互联网上的正确文件夹中。找不到我的错。我是bootstrap，jquery，javaScript的新手。那里有谁能帮助我吗？

谢谢！

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TransCoding–An Arts Research Project</title>
    <meta charset="UTF-8">
   <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]-->

<!-- include jquery, bootstrap and my stylesheet -->

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>


<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles-kug.css" rel="stylesheet" type="text/css"> 


</head>

<body>

 <div class="container"> 

    <div class="col-md-12">

        <h1>
        TransCoding
        </h1>
    </div>

</div>

    <!--start of collapsed navbar -->

        <div class="navbar-header"> 
            <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#main_navbar"
            aria-expanded="false"
            aria-controls=main_navbar">Menu
            </button>
        </div> <!--/end of collapsed navbar -->

        <!--start of un-collapsed navbar -->
        <div 
            class="collapse navbar-collapse" 
            id="main_navbar">
        <ul class="nav navbar-nav">

            <li class="active"><a class="link_hover" href ="index.html"> ABOUT </a></li>
            <li><a href = "english/team.html">TEAM </a></li>
            <li><a  href = "english/methodology.html">METHODOLOGY</a></li>
            <li><a  href = "english/researchquestion.html"> KEY RESEARCH QUESTIONS</a></li>
            <li><a  href="english/blog.html"> THE BLOG "WHAT-IFBLOG.NET" </a></li>

            <li><a  href="english/links.html">LINKS </a></li>
            <li> <a  href = "english/contact.html">CONTACT</li></a>


        </ul>
        </div> <!--/ end of un-collapsed navbar -->
    </div>
</nav>

Answer 1

我一直在寻找并发现有关堆栈溢出的信息：

添加到标题

<meta name="viewport" content="width=device-width, initial-scale=1">

它非常好用，谢谢堆栈溢出。

使用jquery和bootstrap的可折叠Navbar在手机上不起作用，在桌面上正确显示

1 个答案: