0
我使用引導框架來建立一個網站和響應導航在現場演示中工作正常，但是當我嘗試將其插入到我的代碼中時，它變得沒有響應，我不知道爲什麼？Bootstrap三明治導航無響應
這裏是我的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Café Névé</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-offset="50">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1">
<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 page-scroll" href="#page-top">Café Névé</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="header alt vert">
<div class="container">
<h1 id='topheader'>Café Névé
<p class="lead"><img src='img/snowflake.png'></p></h1>
</div>
<div id="sec1" class="blurb">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1 id='who'>Who We Are</h1>
<p class="lead"><!--The Most Popular Responsive Framework--></p>
</div>
<div class="col-md-5">
<h1 class="pull-right"><i class="icon-mobile-phone icon-3x"></i> <i class="icon-tablet icon-3x"></i> <i class="icon-laptop icon-3x"></i></h1>
</div>
</div>
</div>
</div>
</div>
<div class="featurette" id="sec2">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<!-- <h1>Amazing Features</h1> -->
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="featurette-item">
<i class="icon-rocket"></i>
<h4>Mission</h4>
<p>Words we live by</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<i class="icon-magnet"></i>
<h4>History</h4>
<p>Where we came from</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<i class="icon-shield"></i>
<h4>Source</h4>
<p>What we brew and why</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<i class="icon-pencil"></i>
<h4>Retailers</h4>
<p>Where you can get our coffee</p>
</div>
</div>
</div>
</div>
</div>
<div class="callout" id="sec3">
<div class="vert">
<div class="col-md-12 text-center"><h2>RACHEL LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="callout" id="sec4">
<div class="vert">
<div class="col-md-12 text-center"><h2>MILE END LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="callout" id="sec5">
<div class="vert">
<div class="col-md-12 text-center"><h2>STANLEY LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="callout" id="sec6">
<div class="vert">
<div class="col-md-12 text-center"><h2>TORONTO LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="blurb bright">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Founding Partners</h3>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center"><h2><i class="icon-chevron-left"></i> Luke</h2></div>
<div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis si.
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center"><h2>Gabe <i class="icon-chevron-right"></i></h2></div>
<div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit.
</div>
</div>
</div>
</div>
</div>
<!--
<div class="blurb">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Sharing the Bootstrap Love</h3>
<p class="lead"></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><i class="icon-facebook icon-2x"></i></li>
<li><i class="icon-twitter icon-2x"></i></li>
<li><i class="icon-google-plus icon-2x"></i></li>
<li><i class="icon-pinterest icon-2x"></i></li>
</ul>
<hr>
<p>Built with <i class="icon-heart-empty"></i> at <a href="http://www.bootply.com">Bootply</a>.<br>Company ©2014</p>
</div>
</div>
</div>
</footer>
<ul class="nav pull-right scroll-down">
<li><a href="#" title="Scroll down"><i class="icon-chevron-down icon-3x"></i></a></li>
</ul>
<ul class="nav pull-right scroll-top">
<li><a href="#" title="Scroll to top"><i class="icon-chevron-up icon-3x"></i></a></li>
</ul>-->
<!-- script references -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
其更好地展示這是一個小提琴或codepen的例子，所以我們可以幫助你更好。 –