0
基本上我的網站一起使用Fullpage.js和Bootstrap，但問題是爲移動設備設計的菜單按鈕不會摺疊。當我從頁面中刪除Fulpage.js的所有設置時，它工作正常！爲什麼移動設備的Bootstrap導航菜單按鈕不會摺疊
這是我的site，所以你可以測試它，並儘量減少網站sm，然後你會注意到，導航欄按鈕不會崩潰。
所以如果你有關於解決這個問題，這或任何解決方案的任何想法，只是讓我知道...
這裏是我的index.php的fullcode：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="fullPage fixed header and footer." />
<meta name="keywords" content="fullpage,jquery,demo,screen,fixed, header,footer, absolute, positioned,css" />
<meta name="Resource-type" content="Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gooyanet</title>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<link href="style.css" type="text/css" rel="stylesheet"/>
<link href="jquery.fullPage.css" type="text/css" rel="stylesheet"/>
<link href="examples.css" type="text/css" rel="stylesheet"/>
<link href="jquery.fullPage.css" type="text/css" rel="stylesheet"/>
<style>
h1{
font-size: 5em;
font-family: arial,helvetica;
color: #fff;
margin:0;
padding:0;
}
.intro p{
color: #fff;
}
.section{
text-align:center;
}
#header, #footer{
position:fixed;
height: 50px;
display:block;
width: 100%;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
#footer{
bottom:0px;
}
#infoMenu {
bottom: 80px;
}
#infoMenu li a {
color: #fff;
z-index: 999;
}
</style>
<!--[if IE]>
<script type="text/javascript">
var console = { log: function() {} };
</script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="vendors/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="vendors/jquery.easings.min.js"></script>
<script src="examples.js" type="text/javascript"></script>
<script src="vendors/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="vendors/scrolloverflow.js" type="text/javascript"></script>
<script src="jquery.fullPage.js" type="text/javascript"></script>
<script src="examples.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage'],
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
css3: true
});
});
</script>
</head>
<body>
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top BKoodakBold" id="topMenu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.gooyanet.com">Gooyanet</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ><a href="mobile.php">دانلود اپلیکیشن <span class="glyphicon glyphicon-download-alt"></span></a></li>
<li><a href="guides.php">راهنمای سایت <span class="glyphicon glyphicon-oil"></span></a></li>
<li><a href="aboutus.php">درباره ما <span class="glyphicon glyphicon-equalizer"></span></a></li>
<li><a href="login.php">ورود به دنیای گویانت <span class="glyphicon glyphicon-user"></span></a></li>
<li><a href="signup.php">ثبت نام در گویانت <span class="glyphicon glyphicon-registration-mark"></span></a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="footer">
<footer class="footer">
<div class="container">
<p class="text-muted">Designed & Developed By <a href="http://www.daygostar.com">Daygostar Inc</a></p>
</div>
</footer>
</div>
<div id="fullpage">
<div class="section">
<iframe src="Round.html" frameborder="0" scrolling="no" style="width:100%;height:100% !important;"></iframe>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
而這裏的打印屏幕像你能理解我說的是哪個按鈕：
