【发布时间】：2016-09-09 18:13:48
【问题描述】：
我刚刚开始这个项目，所以它很简单，但我已经遇到了一个问题。当我在 Safari 和 Chrome 中将桌面浏览器的大小调整为移动大小时，一切都按预期工作。但是，当我在 iPhone 5 或 iPhone 6 上查看它时（我假设是其他移动设备），下拉菜单按钮什么也不做。我在这些设备上使用 Safari。你可以在这里看到我的代码的实时版本：http://fkrtestsite.byethost3.com/。
我已经查看了许多类似的问题，但没有任何解决方案适合我。我已经有了元标记，我的数据目标与按钮的 id 匹配，我相信我拥有所有必要的插件。我对引导程序完全陌生，所以希望这只是我订购所有东西的方式的一些菜鸟错误。希望有人能帮帮我！！
下面我附上了我的html和css。
@charset "UTF-8";
/* CSS Document */
.logo-img {
min-width: 70px;
max-width: 190px;
height: 100%;
width: auto;
}
.header-icon {
font-size: 50px;
}
.navbar-collapse {
text-align: center;
font-size: 20px;
background-color: #DED0E5;
}
.navbar-nav {
display: inline-block;
float: none;
width: 100%;
}
.nav-options {
padding: 10px;
font-weight: bold;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: white; /*Sets the text hover color on navbar*/
background: #A163C2;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #4E0065;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #66CCFF; /*change color of links in drop down here*/
}
.nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here*/
}
.navbar-default .navbar-nav > li > a {
color: black; /*Change active text color here*/
}
.navbar-header {
background-color: #C9A7DB;
}
@media (min-width: 767px) {
.navbar-nav {
margin-top: 30px;
width: auto;
}
.nav-options {
padding: 5px;
font-size: 2vw;
}
.navbar-collapse {
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>【问题讨论】：
标签： iphone twitter-bootstrap mobile navbar