我刚开始这个项目,所以它非常裸露,但我已经遇到了一个问题。当我将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>