沒有功能的Bootstrap 3導航欄切換按鈕
[英]Bootstrap 3 Navigation Bar toggle button with no function
問題描述
我正在使用最新版本的Bootstrap 3，並且已經為我的網站制作並自定義了導航欄，可以在這里找到它 。 我似乎找不到為什么當我將瀏覽器窗口調整為移動設備大小時，折疊按鈕不起作用的原因。 您能弄清楚為什么按鈕不起作用嗎？
@import url('https://fonts.googleapis.com/css?family=Dosis'); @import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); body { font-family: Raleway; } footer { background-color: #000000; color: #ffffff; text-align: center; padding: 5px; } #main-menu.navbar-default .navbar-brand { color: rgba(255, 255, 255, 1); font-family: Montserrat; font-size: 90%; } #main-menu.navbar-default { font-size: 17px; background-color: rgba(0, 153, 255, 1); border-bottom-width: 0px; font-family: Montserrat; font-size: 90%; } #main-menu.navbar-default .navbar-nav>li>a { color: rgba(255, 255, 255, 1); background-color: rgba(0, 153, 255, 1); } #main-menu.navbar-default .navbar-nav>li>a:hover, #main-menu.navbar-default .navbar-nav>li>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(0, 170, 255, 1); } #main-menu.navbar-default .navbar-nav>.active>a, #main-menu.navbar-default .navbar-nav>.active>a:hover, #main-menu.navbar-default .navbar-nav>.active>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(64, 179, 255, 1); } #main-menu.navbar-default .navbar-toggle { border-color: #0066cc; color: #0099ff; } #main-menu.navbar-default .navbar-toggle:hover, #main-menu.navbar-default .navbar-toggle:focus { background-color: #0066cc; color: #0099ff; } #main-menu.navbar-default .navbar-toggle .icon-bar { background-color: #0066cc; color: #004080; } #main-menu.navbar-default .navbar-toggle:hover .icon-bar, #main-menu.navbar-default .navbar-toggle:focus .icon-bar { background-color: #0099ff; color: #004080; }
<head> <title>Home Page</title> <link type="text/css" href="/StyleSheets/ModuleStyleSheets.css" rel="StyleSheet" /> <script type="text/javascript"> var jslang = 'EN'; </script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="index.html" class="pull-left"> <img src="http://www.coding-kids.net/logo.png" width="180px"> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html"><i class="fa fa-home"></i> HOME</a> </li> <li><a href="tutorials"><i class="fa fa-code"></i> TUTORIALS</a> </li> <li><a href="about"><i class="fa fa-align-justify"></i> ABOUT</a> </li> <li><a href="faq"><i class="fa fa-question-circle"></i> FAQs</a> </li> <li><a href="contact"><i class="fa fa-comments-o"></i> CONTACT</a> </li> </ul> </div> </div> </div> <div> </div> <footer> © Coding Kids 2016. All rights reserved. </footer> </body>
2 個解決方案
解決方案1
0 已采納 2016-03-31 09:27:16
在Bootstrap之前包含jQuery，如下所示：
@import url('https://fonts.googleapis.com/css?family=Dosis'); @import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); body { font-family: Raleway; } footer { background-color: #000000; color: #ffffff; text-align: center; padding: 5px; } #main-menu.navbar-default .navbar-brand { color: rgba(255, 255, 255, 1); font-family: Montserrat; font-size: 90%; } #main-menu.navbar-default { font-size: 17px; background-color: rgba(0, 153, 255, 1); border-bottom-width: 0px; font-family: Montserrat; font-size: 90%; } #main-menu.navbar-default .navbar-nav>li>a { color: rgba(255, 255, 255, 1); background-color: rgba(0, 153, 255, 1); } #main-menu.navbar-default .navbar-nav>li>a:hover, #main-menu.navbar-default .navbar-nav>li>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(0, 170, 255, 1); } #main-menu.navbar-default .navbar-nav>.active>a, #main-menu.navbar-default .navbar-nav>.active>a:hover, #main-menu.navbar-default .navbar-nav>.active>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(64, 179, 255, 1); } #main-menu.navbar-default .navbar-toggle { border-color: #0066cc; color: #0099ff; } #main-menu.navbar-default .navbar-toggle:hover, #main-menu.navbar-default .navbar-toggle:focus { background-color: #0066cc; color: #0099ff; } #main-menu.navbar-default .navbar-toggle .icon-bar { background-color: #0066cc; color: #004080; } #main-menu.navbar-default .navbar-toggle:hover .icon-bar, #main-menu.navbar-default .navbar-toggle:focus .icon-bar { background-color: #0099ff; color: #004080; }
<head> <title>Home Page</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <link type="text/css" href="/StyleSheets/ModuleStyleSheets.css" rel="StyleSheet" /> <script type="text/javascript"> var jslang = 'EN'; </script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="index.html" class="pull-left"> <img src="http://www.coding-kids.net/logo.png" width="180px"> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html"><i class="fa fa-home"></i> HOME</a> </li> <li><a href="tutorials"><i class="fa fa-code"></i> TUTORIALS</a> </li> <li><a href="about"><i class="fa fa-align-justify"></i> ABOUT</a> </li> <li><a href="faq"><i class="fa fa-question-circle"></i> FAQs</a> </li> <li><a href="contact"><i class="fa fa-comments-o"></i> CONTACT</a> </li> </ul> </div> </div> </div> <div> </div> <footer> © Coding Kids 2016. All rights reserved. </footer> </body>
解決方案2
0 2016-03-31 09:28:50
更改順序以引導js文件
@import url('https://fonts.googleapis.com/css?family=Dosis'); @import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Montserrat'); body { font-family: Raleway; } footer { background-color: #000000; color: #ffffff; text-align: center; padding: 5px; } #main-menu.navbar-default .navbar-brand { color: rgba(255, 255, 255, 1); font-family: Montserrat; font-size: 90%; } #main-menu.navbar-default { font-size: 17px; background-color: rgba(0, 153, 255, 1); border-bottom-width: 0px; font-family: Montserrat; font-size: 90%; } #main-menu.navbar-default .navbar-nav>li>a { color: rgba(255, 255, 255, 1); background-color: rgba(0, 153, 255, 1); } #main-menu.navbar-default .navbar-nav>li>a:hover, #main-menu.navbar-default .navbar-nav>li>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(0, 170, 255, 1); } #main-menu.navbar-default .navbar-nav>.active>a, #main-menu.navbar-default .navbar-nav>.active>a:hover, #main-menu.navbar-default .navbar-nav>.active>a:focus { color: rgba(255, 255, 255, 1); background-color: rgba(64, 179, 255, 1); } #main-menu.navbar-default .navbar-toggle { border-color: #0066cc; color: #0099ff; } #main-menu.navbar-default .navbar-toggle:hover, #main-menu.navbar-default .navbar-toggle:focus { background-color: #0066cc; color: #0099ff; } #main-menu.navbar-default .navbar-toggle .icon-bar { background-color: #0066cc; color: #004080; } #main-menu.navbar-default .navbar-toggle:hover .icon-bar, #main-menu.navbar-default .navbar-toggle:focus .icon-bar { background-color: #0099ff; color: #004080; }
<head> <title>Home Page</title> <link type="text/css" href="/StyleSheets/ModuleStyleSheets.css" rel="StyleSheet" /> <script type="text/javascript"> var jslang = 'EN'; </script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="main-menu" class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a href="index.html" class="pull-left"> <img src="http://www.coding-kids.net/logo.png" width="180px"> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html"><i class="fa fa-home"></i> HOME</a> </li> <li><a href="tutorials"><i class="fa fa-code"></i> TUTORIALS</a> </li> <li><a href="about"><i class="fa fa-align-justify"></i> ABOUT</a> </li> <li><a href="faq"><i class="fa fa-question-circle"></i> FAQs</a> </li> <li><a href="contact"><i class="fa fa-comments-o"></i> CONTACT</a> </li> </ul> </div> </div> </div> <div> </div> <footer> © Coding Kids 2016. All rights reserved. </footer> </body>
以編程方式切換引導程序 3 導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.