0
我剛開始這個項目，所以它非常裸露，但我已經遇到了一個問題。當我將Safari瀏覽器和Chrome瀏覽器的桌面瀏覽器調整爲手機尺寸時，所有內容都完全按照預期運行。但是，當我在iPhone 5或iPhone 6上查看它（並假設其他移動設備）時，下拉菜單按鈕不起任何作用。我在這些設備上使用Safari。你可以在這裏看到我的代碼的實時版本：http://fkrtestsite.byethost3.com/。Bootstraps navbar-collapse不能在iPhone上工作
我已經瀏覽了許多類似的問題，但沒有解決方案爲我工作。我已經有元標記，我的數據目標匹配按鈕的ID，我相信我有所有必要的插件。我對bootstrap完全陌生，所以希望這只是我訂購了所有東西的一些小菜鳥錯誤。我希望有人能幫助我！
下面我附上了我的html和css。
@charset "UTF-8";
/* CSS Document */
.logo-img {
\t min-width: 70px;
\t max-width: 190px;
\t height: 100%;
\t width: auto;
}
.header-icon {
\t font-size: 50px;
}
.navbar-collapse {
\t text-align: center;
\t font-size: 20px;
\t background-color: #DED0E5;
}
.navbar-nav {
\t display: inline-block;
\t float: none;
\t width: 100%;
}
.nav-options {
\t padding: 10px;
\t font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
\t color: white; /*Sets the text hover color on navbar*/
\t background: #A163C2;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
\t color: white; /*BACKGROUND color for active*/
\t background-color: #4E0065;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
\t color: #262626;
\t text-decoration: none;
\t background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover, .nav > li > a:focus {
\t text-decoration: none;
\t background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
\t color: black; /*Change active text color here*/
}
.navbar-header {
\t background-color: #C9A7DB;
}
@media (min-width: 767px) {
.navbar-nav {
\t margin-top: 30px;
\t width: auto;
}
.nav-options {
\t padding: 5px;
\t font-size: 2vw;
}
.navbar-collapse {
\t background-color: #C9A7DB;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fkr.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="container-fluid">
<nav class = "navbar navbar-default" role = "navigation">
<div class="row">
<div class = "navbar-header">
<div class = "navbar-toggle"
data-toggle = "collapse" data-target = "#navbarcollapse">
<span class="header-icon glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</div>
<a href="#" class="pull-left"><img src="../logo.png" alt=""></a>
</div>
<div class = "collapse navbar-collapse" id = "navbarcollapse">
<ul class = "nav navbar-nav">
<li class = "nav-options"><a href = "#">Home</a></li>
<li class = "nav-options"><a href = "#">Adopt</a></li>
<li class = "nav-options"><a href = "#">Get Involved</a></li>
<li class = "nav-options"><a href = "#">Store</a></li>
<li class = "nav-options"><a href = "#">About</a></li>
<li class = "nav-options"><a href = "#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.js"></script>
</body>
</html>