我使用 Bootstrap 3 作为我的个人网站的框架，我必须为我的研究生类(class)编写代码。目前，我正在使用 Insite Design Lab 教程代码中的单页网站平滑滚动代码:http://www.insitedesignlab.com/how-to-make-a-single-page-website/ .
我无法让我的可折叠菜单在较小的屏幕上折叠。这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald|Lato|Roboto+Slab' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap & Fonts-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/respond.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--Body -->
<div id="container">
<!--Test Nav from Lynda.com Tutorial -->
<!-- Row 1: navigation -->
<div class="row">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<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" id="collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Résumé</a></li>
<li><a href="#connect">Connect</a></li>
</ul>
</div>
</nav>
</div>
</div><!-- Container End -->
<!-- Insite Design Lab Tutorial Code: http://www.insitedesignlab.com/how-to-make-a-single-page-website/-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contactLink").click(function(){
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
}
else{
$("#contactForm").slideUp("slow");
}
});
});
function closeForm(){
$("#messageSent").show("slow");
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
}
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top -10;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 1000);
var d = document.createElement("div");
d.style.height = "101%";
d.style.overflow = "hidden";
document.body.appendChild(d);
window.scrollTo(0,scrollToM);
setTimeout(function() {
d.parentNode.removeChild(d);
}, 10);
return false;
});
}
}
});
});
/*! Smooth Scroll - v1.4.5 - 2012-07-22
* Copyright (c) 2012 Karl Swedberg; Licensed MIT, GPL */
</script>
</body>
<!-- Body End -->
我删除了网站上的大部分实际页面，但我留下了头部、导航和脚本信息。我的网站的链接是 http://www.auburn.edu/~tbd0011
我似乎也无法弄清楚如何设置将填满整个屏幕的页面高度，我也无法更改 Accordion 中面板的颜色。
在此先感谢您的帮助!
最佳答案
I can't get my collapsible menu to collapse on smaller screen.
它在最新的 Firefox 中运行良好，当我尝试在打开后关闭折叠菜单时出现问题。
我肯定会从清理代码开始 - 在
head 中, 你加载这两个脚本<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
然后在
<body> 之后再次加载它们来自不同的来源。<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
选择其中之一，不要将所有内容加载两次。
此外，respond.js 应该只在 IE 8 和更早的版本中加载(连同 HTML5shiv)，参见 Bootstrap docs .
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
I also can't seem to figure out how to set a page height that will fill the entire screen and I also can't change the color of the panels in my accordion.
页面高度应设置为自动，因为它应该与内容一样高。
至于 Accordion ，我不知道您指的是哪个 Accordion ，但这是一个简单的 CSS 问题，您可以通过更高的 CSS 规范或 !important 来解决。
关于css - Bootstrap 3 : Collapsible nav won't close，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29481509/