將codepen網站移植到github頁面 - 摺疊導航按鈕不起作用

我最近試圖將我在codepen中製作的網站移植到GitHub頁面上。由於摺疊的導航欄按鈕似乎不適用於新網站，因此我一直在與該網站發生問題。該頁面是響應等，但按鈕時不做任何事情。希望得到一些幫助。 Site 將codepen網站移植到github頁面 - 摺疊導航按鈕不起作用

不知道你想要的代碼段，但這裏有一些你可能需要的。

<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>

來源

2017-07-30 J.Jones

你忘了鏈接都爲引導的的JavaScript代碼，還有jQuery的庫（其引導的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）：

<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>

希望這有助於！ :)

來源

2017-07-30 23:20:51

仍然無法正常工作:(您是否嘗試過爲自己查看網站，以便我們可以否認/確認問題？ –

好了。現在解決 - 您是正確的，但事實證明您需要擁有該網站對於jquery和bootstrap正好在body標籤之上讓他們工作感謝您的快速反應和問題的解決 –

我的歉意;我最初並沒有意識到您正在運行HTTPS，並且我給出的鏈接是HTTP，您需要使用協議HTTPS的無法識別的鏈接：'//maxcdn.bootstrapcdn.com ...'。我更新了我的代碼來糾正這個問題，我很高興聽到你的工作:) –

將codepen網站移植到github頁面 - 摺疊導航按鈕不起作用

回答

相關問題