Bootstrap 移动菜单未按预期打开答案

【问题标题】：Boostrap mobile menu doesn't open as expectedBootstrap 移动菜单未按预期打开
【发布时间】：2015-05-02 04:06:23
【问题描述】：

我已经阅读了关于此的帖子和视频，但我不确定我做错了什么。移动模式下的菜单打不开。我查看了其他示例，但看不到我做错了什么。

<!DOCTYPE hmtl>
<html lang="en">

<head>
	<meta charset="utf-8">
    <title>Holla Mohalla - The Forgotten Festival Documentary</title>
    <meta name="description" content="Holla Mohallah">
    <!-- Latest compiled and minified CSS -->
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    </head>
    
    <body>
    
    
    <!--Navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" id="my-navbar">
    	<div class="container">
        	<div class="navbar-header">
            	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                                
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span>
                </button>
                
                <a href=""   class="navbar-brand">Hola Mohalla - The Forgotten Documentary</a>            
       		 </div> 
        	<div class="collapse navbar-collapse" id="navbar-collapse">
        		<ul class="nav navbar-nav">
        			<li> <a href="#link 1">link 1</a></li>
           			<li> <a href="#link 2">link 2</a></li>
           			<li> <a href="#link 3">link 3</a></li>
           			<li> <a href="#link 4">link 4</a></li>
            
        		 </ul>
          	</div>
          </div>
            
      
    </nav>
    
    
    
  <!-- Copied from jquery -->  
<script src="http://code.jquery.com/jquery-2.1.3.min.js"</script>    
    <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    
    </body>
    
    </html>

</body>

</html>

【问题讨论】：

谢谢，您的意思是在标题中吗？抱歉第一次使用引导程序
哈哈，是的，这有点菜鸟。大声笑对不起冲:)
看看你的标题类型：它应该是而不是 :D lolz
加上lolz.jquery中的脚本没有结束标签：所以它应该是：
Definelty
Owned
;) 感谢感谢，现在就试一试，放慢速度。赞赏

标签： twitter-bootstrap responsive-design

【解决方案1】：

你错过了：jquery.min.js & bootstrap.min.js

链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

所以，作为默认链接，你需要三个链接：

bootstrap.min.css
jquery.min.js
bootstrap.min.js

你可以放置没有。 2.3.上面</body> 以更快地加载而不是内部标签</head>

以下是最佳实践：

更新：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.js">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" rel="home" href="#">Brand</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
    </div>
    <div style="height: 1px;" aria-expanded="false" class="navbar-collapse collapse">
..............

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>

【讨论】：