0

当导航栏为较小的浏览器折叠时,我无法让导航栏按钮向下切换菜单。我已经尝试了这个论坛上关于不同 js 链接的所有建议,并且我查看了许多按钮工作的引导示例网站的源代码,但我仍然无法让它工作。我什至可以在 bootply 中构建它,它工作正常,当我将它带入我的文件目录时它不起作用。

这段代码中是否有某些东西明显阻止了它的工作?

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Snow's Farm</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-     scale=1.0, user-scalable=no">
    <meta name="description" content>
    <meta name="author" content="">
    <link href="./bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="./main.css" rel="stylesheet" media="screen">
</head>

<body class="bs-docs-home" style data-twttr-rendered="true">
    <a class="sr-only" href="#content">Skip navigation</a>

    <!-- Docs master nav -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <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>
      </button>
      <a class="navbar-brand" href="#">Snow's Farm</a>
</div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a class="dropdown" href="www.google.com"><p>The Farm Family</p></a></li>     
        <li><a href="www.yahoo.com"><p>Mulch</p></a></li>  
        <li><a href="#soil"><p>Soil</p></a></li>
        <li><a href="#stone"><p>Stone</p></a></li>
        <li><a href="#trees"><p>Christmas Trees</p></a></li>
        <li><a href="#delivery"><p>Delivery</p></a></li>
        <li><a href="#docs"><p>Pricing Documents</p></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

</body>


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="./respond.min.js"></script>
<script src="./jquery.js"></script>

4

0 回答 0