Question

我最近尝试将我在codepen中创建的网站移植到GitHub页面。由于折叠的导航栏按钮似乎不适用于新网站，因此我一直遇到网站问题。页面响应等，但点击时按钮不执行任何操作。会感激一些帮助。 Site

不知道你想要的代码部分，但这里有一些你可能需要的代码。

<html>
<head>
<title> Jacob Jones- portfolio</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css"/>



<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>

 <!-- Navbar start -->

<nav class="navbar navbar-custom" id="bar">
 <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="btn btn-default" class="navbar-toggle collapsed btn btn-default collps" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
    <span class="sr-only"></span>


   <i class="fa fa-bars" aria-hidden="true"></i>

  </button>

</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">
    <li class><a href="#about-me">About</a></li>
    <li><a href="#skill-set">Skillset</a></li>

     <li><a href="#projects">Portfolio</a></li>

  </ul>

Answer 1

您忘记链接Bootstrap的 JavaScript 代码，以及 jQuery 库（Bootstrap的JavaScript依赖于它）。要解决此问题，请将以下两行添加到<head>（确保在引导程序的JavaScript之前加载jQuery库）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

注意如果您通过HTTPS运行您的网站，则可能会收到混合内容警告。因此，您需要使用与协议无关的来源：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这将修复菜单功能，如下所示（减去自定义CSS）：

＆＃13;
＆＃13;
<head> <title> Jacob Jones- portfolio</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>  <nav class="navbar navbar-custom" id="bar"> <div class="container-fluid">  <div class="navbar-header"> <button type="btn btn-default" class="navbar-toggle collapsed btn btn-default collps" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true"> <span class="sr-only"></span> <i class="fa fa-bars" aria-hidden="true"></i> </button> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class><a href="#about-me">About</a></li> <li><a href="#skill-set">Skillset</a></li> <li><a href="#projects">Portfolio</a></li> </ul> </div> </div> </nav> </body>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！：）

将codepen网站移植到github页面 - 折叠导航按钮不起作用

1 个答案: