0
私はこのプロジェクトを始めたばかりなので、かなり裸ですが、すでに問題にぶつかっています。 SafariとChromeの両方でデスクトップブラウザのサイズをモバイルサイズに変更すると、すべてが正常に動作します。しかし、私がiPhone 5やiPhone 6（そして私は他の携帯機器を想定しています）で見ると、ドロップダウンメニューボタンは何もしません。これらのデバイスでSafariを使用しています。私のコードのライブバージョンはhttp://fkrtestsite.byethost3.com/です。Bootstraps navbar-collapseがiPhoneで動作しない
私はすでに多くの同様の質問を見てきましたが、私にとって解決策はありませんでした。私は既にメタタグを持っています、私のデータターゲットはボタンのIDと一致します、私はすべての必要なプラグインを持っていると信じています。私はブートストラップにはまったく新しいので、うまくいけば、これは私がすべてのものを注文した方法のいくつかのnoobエラーです。誰かが私を助けてくれることを願っています!!
以下、私は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>