我刚刚开始自学一些基本的Web设计，并且一直在尝试使用Bootstrap3。
我的导航栏和手风琴出现了一些问题，这些问题似乎是基于CDN导入的顺序。我正在尝试在我的导航栏/标题部分中包含所有需要的导入，因此在其他页面上不需要> head <部分。
当我按顺序排列它们时，在遇到的每个线程中都看到它们按此顺序排列。
<script src = ...jquery/3.3.1/jquery.min.js"></script>
<script src = ...maxcdn../3.3.7/js/bootstrap.min.js"</script>
按此顺序，响应式导航栏中断，汉堡菜单不再起作用，但手风琴可折叠功能良好。我知道引导程序需要先加载jquery才能使用其某些功能，但是为了使我的导航栏正常工作，我必须在上面切换两行。我认为这是我导航栏代码中的一个问题，但无法查明该问题。
您可以在此处看到损坏的导航栏： Broken Navbar/Hamburger menu
这是我的导航栏代码：
<!DOCTYPE html>
<html>
<head> <!--Import needed CDN stuff-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: yellow;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.active {
background-color: yellow;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="topnav" data-spy="affix" data-offset-top="0"
id="myTopnav">
<a href="http://cabins.cannondam.net/" data-toggle="tooltip"
title="Click here for information on Cannon Dam Cabins"
class="active">Cabins</a>
<a href="#Store">Store</a>
<a href="#FAQ">FAQ</a> <!--FAQ section with Accordian:
Cabins FAQ, Store FAQ,-->
<a href="#Contact">Contact</a>
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
任何帮助或改进技巧都将非常有用！
答案 0 :(得分：0)
如果您正在使用引导程序，则不需要媒体查询和JS，class =“ navbar-toggle”本身就可以完成。 看一下这段代码，也许对您有帮助：
<!DOCTYPE html>
<html>
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----Style---->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!----Script---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a{
width: 100%;
color: black;
}
.icon-bar{
background-color:black;
}
.topnav {
overflow: hidden;
background-color: yellow;
width: 100%;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.active {
background-color: yellow;
}
.topnav .icon {
display: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top" id="navbar_home">
<div class="topnav navbar-header">
<button type="button" id="nav-icon2" class="navbar-toggle" data-toggle="collapse" data-target="#myTopnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="topnav collapse navbar-collapse" id="myTopnav">
<ul class="nav navbar-nav navbar-center">
<li><a href="http://cabins.cannondam.net/" data-toggle="tooltip" title="Click here for information on Cannon Dam Cabins" class="active">Cabins</a></li>
<li> <a href="#Store">Store</a></li>
<li><a href="#FAQ">FAQ</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
答案 1 :(得分：0)
我认为该问题与您调用外部资源的顺序没有任何关系。它很可能与无效的源代码或脚本冲突有关。
查看您网站上的源代码，我发现您的标记存在一些问题。您有两个开头<html>标签和三个开头<body>标签。看起来好像您在复制和粘贴代码片段时并没有完全了解标记的工作方式。另外，您将包括Bootstrap框架，但无法在页面上充分利用它。
首先，让我们看一下标记的结构：
<!DOCTYPE html>
<html>
<head>
<!-- Metadata, external resource links, CSS, Javascript, etc. -->
</head>
<body>
<!-- Site Content -->
</body>
</html>
我们从DOCTYPE声明开始。 HTML页面中包含的所有其他内容都应以开始<html>标签开始，并以结束</html>标签结束。在任何页面上，您都不应有超过一组HTML标签。
我不会花时间尝试和调试您的代码；它需要重写。我将从利用内置导航中的Bootstrap并消除内联导航脚本开始
：
body, .container-fluid {
background: yellow;
}<!DOCTYPE html>
<html>
<head>
<!--Import needed CDN stuff-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="http://cabins.cannondam.net/" data-toggle="tooltip" title="Click here for information on Cannon Dam Cabins" class="active">Cabins</a></li>
<li><a href="#Store">Store</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<!-- Now We'll Add Your Accordians -->
<div class="container-fluid">
<div id="Accordian_Container" class="container">
<br><br>
<!-- This is the title of the page, Appears before accordian collapsible panel-->
<h2 id="PageTitle"><strong>Cabins</strong></h2>
<!--General Description of Cabins (or subtitle)-->
<p>Get away from it all at our spacious cedar cabins. All of our cabins can sleep up to six people all on one level. We have special suites available for large groups. Our cabins come fully furnished for your comfort and convenience. Our cabins are
well suited for weekend getaways, family vacations, family reunions, fishing trips, or company outings.</p>
<!--Specifing the type of collapsible/panel-->
<div class="panel-group" id="accordion">
<!--Beginning code for Collapsible Section 1 (Lakeside Cabin)-->
<div class="panel panel-default">
<!-- Adding stylization here affects the panel contents-->
<div class="panel-heading">
<h4 class="panel-title">
<!--Assigns relevent information to section header, including the collapse action and header name-->
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><span class="glyphicon glyphicon-chevron-right"></span>Lakeside Family Cabin</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Body of collapsible panel 1-->
<!-- Description of Lakeside Family Cabin -->
Lakeside Family Cabins are designed to sleep a maximum of 6 people comfortably all on one level. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br>
<br>
<br>
<!--Video Tour Header-->
Tour a typical Lakeside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1G8LY_ZfvVgFtW0UlvP-bnAaAXGPYTxsQ/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Lakeside Family Cabin now using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0"><a href="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css">Make Reservation</a></iframe>
</div>
<!--End of Collapisble Section 1-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 2(3 Room Cabin)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><span class="glyphicon glyphicon-chevron-right"></span>Three Room Lakeside Cabin</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Three Room Lakeside Cabin-->
3 Room Family Cabins have 2 private bedrooms and can sleep up to 6 comfortably.They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br>
<br>
<br>
<!--Video Tour Header-->
Tour a typical Three Room Lakeside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1YzFGqScrcmS88pj_DVBOjNAIOpVFszY1/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Three Room Lakeside Family Cabin now using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0"><a href="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css">Make Reservation</a></iframe>
</div>
<!--End of Collapsible Section 2-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 3 (Poolside Cabins)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><span class="glyphicon glyphicon-chevron-right"></span>Poolside Family Cabin</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Poolside Family Cabin-->
Poolside Family Cabins sleep up to 6 guests, feature full spacious kitchens and are next to our indoor pool.
<!--Video Tour Header-->
Tour a typical Poolside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1-ImuBKm38NH528tVdYRr2JaYbxqIKylo/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Poolside Family Cabin today using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0"><a href="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css">Make Reservation</a></iframe>
</div>
<!--End of Collapsible Section 3-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 4 (Motel Rooms)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4"><span class="glyphicon glyphicon-chevron-right"></span>Motel Room</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Motel Room-->
Motel Rooms contain 2 queen beds and can accommodate up to 4 guests. Motel rooms do contain a small refrigerator, microwave and coffee maker. Rooms have access to all amenities, including BBQ facilities, indoor pool and private lake.
<!--Motel Room Slideshow in place of video-->
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--Picture 1-->
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1tc8T5RQiDgXYcwF15q1Chb69gU-69fUN" alt="Motel 1" style="width:100%;">
</div>
<!--Picture 2-->
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=105lHyZjyFc9pxQ_Mztjj0BFJ9ezTH2KK" alt="Playground and Poolside Cabins" style="width:100%;">
</div>
<!--Picture 3-->
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1u9XT6N5tuowChdtl7kxCG095Q4sqA7Jy" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<!--Left Control-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<!--Right control-->
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--End of Collapsible Section 4-->
</div>
<!--End of Accordian-->
<script>
//When opening panel remove chevron-right, add chevron down
$('#accordion .panel-collapse').on('shown.bs.collapse', function() {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});
//When closing panel remove chevron-down, add chevron right
$('#accordion .panel-collapse').on('hidden.bs.collapse', function() {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});
</script>
</div>
<!--End of of accordians container-->
</div>
</body>
</html>
注意：我还将您的iframe封装在响应div中，以防止它们溢出您的内容区域。