Ich habe gerade dieses Projekt gestartet, so ist es ziemlich nackt, aber ich habe schon ein Problem. Wenn ich die Größe meines Desktop-Browsers sowohl in Safari als auch in Chrome auf die Größe des Handys ändere, funktioniert alles genau so, wie es sein sollte. Wenn ich es jedoch auf einem iPhone 5 oder iPhone 6 ansehe (und ich nehme andere mobile Geräte an), tut die Dropdown-Menüschaltfläche nichts. Ich verwende Safari auf diesen Geräten. Sie können eine Live-Version meines Codes hier sehen: http://fkrtestsite.byethost3.com/.Bootstraps navbar-collapse funktioniert nicht auf dem iPhone
Ich habe schon durch viele ähnliche Fragen gesucht, aber keine Lösungen haben für mich gearbeitet. Ich habe bereits das Meta-Tag, mein Datenziel entspricht der ID des Buttons, ich glaube, ich habe alle notwendigen Plugins. Ich bin Bootstrap total neu, also hoffentlich ist das nur ein kleiner Fehler mit der Art, wie ich alles bestellt habe. Ich hoffe, dass mir jemand helfen kann !!
Unten habe ich meine HTML und CSS angeschlossen.
@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>