0
Ich weiß, dass die ausgeblendete Umschalt-Navigationsschaltfläche ein großes Problem bei Stackoverflow hat. Ich habe das gleiche Problem mit drei Websites im Bau und ich benutze die gleiche HTML-Reihenfolge und vor allem für die Navigationsleiste ... und die Umschaltfläche will nicht auf die Klicks ich gebe es reagieren. Ich verwende jQuery v1.11.2, kompilierte und minimierte CSS, JavaScript und Schriftarten Bootstrap von http://getbootstrap.com/getting-started/. Was ich sagen würde ist, ist die JQuery-Version in Bezug auf Code-Kompatibilität zwischen Bootstrap und JQuery wichtig? Mein Code für den „UN-WORKING“ navbar-Umschaltknopf ist wie folgt:Responsive Navbar-Toggle-Taste funktioniert nicht.
<!DOCKTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta lang="en">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="Bootstrap-three/CSS/bootstrap-theme.min.css" rel="stylesheet">
<link href="Bootstrap-three/CSS/bootstrap.min.css" rel="stylesheet">
<link href="Bootstrap-three/CSS/bootstrap.icon-large.min.css" rel="stylesheet">
<script src="Assets/modernizr-custom.js" rel="stylesheet"></script>
<link href="Assets/normalize.css" rel="stylesheet">
<link href="Assets/Animate.css" rel="stylesheet">
<link href="CSS/Styles.css" rel="stylesheet">
</head>
<body>
<div class="background">
<!-- <img src="images/img/abstract-artistic-HD-wallpapers.jpg" class="" alt=""> -->
</div>
<div class="Container">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="Container">
<!--type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target="collapse" data-target="#navigate" type="button" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand flip">
<a href="#" class="front"><img src="images/dsg/logo-n.png" height="60px" width="inherit" alt="logo"></a>
<a href="#" class="back" style="margin: 0px 15px;"><img src="images/dsg/logo-b.png" height="60px" width="inherit" alt="logo"></a>
</div> <!---->
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse pull-right" id="my-nav-items">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Contact us</a></li>
<!-- <button class="btn btn-default" type="button"> <strong class="glyphicon glyphicon-search"></strong></button> -->
</ul>
</div>
</div>
<div class="misc-links">
<div class="container">
<div class="pull-right" style="padding: 5px;">
<img src="images/ico/facebook.png" class="hover-img" alt="Like us on Facebook"><img src="images/ico/instagram.png" class="hover-img" alt="Follow us on Instagram"><img src="images/ico/twitter.png" class="hover-img" alt="Follow us on Twitter">
</div>
</div>
</div>
</nav>
</div>
<!-- faster load tie -->
<script src="jQuery/jquery.min.js" type="text/javascript"></script>
<script src="jQuery/jquery.jcarousel.min.js" type="text/javascript"> </script>
<script src="Bootstrap-three/JS/bootstrap.min.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/bootstrap.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/npm.js" type="text/javascript"></script>
<script src="Javascript/Script.js" type="text/javascript"></script>
<script src="Bootstrap-three/JS/bootstrap-modal.js" type="text/javascript"></script>
<script src="smooth-scroll/SmoothScroll.js" type="text/javascript"></script>
</body>
</html>
und die benutzerdefinierten eingebetteten CSS-Stile sind wie folgt:
<style>
body a {
color: #2b2b2b;
}
body a:hover {
color: #fff;
text-decoration: none;
}
nav {
min-height: 100px;
background: #fff;
color: #000;
padding: 0;
margin: 0;
}
nav a:hover {
color: orange;
text-decoration: none;
}
.navbar-toggle {
background: cadetblue;
color: #fff;
}
footer {
background: #fff;
color: #000;
vertical-align: middle;
}
.container {
background: transparent;
}
body a: hover {
color: white;
background: black;
}
.social-login-strip {
width: 100%;
height: inherit;
background: #222;
color: white;
border-bottom: #000 thick solid;
}
.social-login-strip a {
color: white;
text-decoration: none;
}
.social-login-strip a:hover {
color: white;
text-decoration: none;
}
.white {
padding: 20px 0px;
color: #000;
background: #fff;
min-height: 100px;
}
.icon-bar {
background: white;
}
.cari {
min-height: 500px;
height: inherit;
top: 80px;
background: transparent;
color: white;
}
.cari a {
color: white;
}
.cari a:hover {
color: azure;
}
.sector {
min-height: 600px;
background: #222;
color: white;
}
.background {
max-width: 100%;
max-height: 100%;
position: fixed;
z-index: -9999;
background-size: contain;
}
#d-strip {
min-height: 60px;
background: url("images/img/6933687-abstract-artistic-art.jpg");
background-size: cover;
}
.misc-links {
height: 30px;
background-color: orange;
}
.space {
top: 0;
left: 0;
max-height: 100%;
min-width: 100%;
background: white;
}
.banner-prop {
max-height: auto;
max-width:100% ;
}
.centering {
padding: 5% 0;
}
.child-centering {
padding: 10% 0;
}
.strip {
min-height: 30px;
background: url("images/img/HD-Painting-Wallpaper-Desktop-Background-1.jpg");
}
.constrain {
max-height: 500px;
max-width: inherit;
}
.caption-blok {
min-height: 30px;
background: #2b2b2b;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #fff;
padding: 2px 5px;
}
.divide {
background: transparent;
min-height: 200px;
}
#linker {
background-color: cadetblue;
min-height: 300px;
width: 100%;
color: white;
opacity: 0.9;
-webkit-opacity: 0.9;
}
.bgbgor {
background: orange;
}
#sign-up {
border: #2b2b2b medium solid ;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.marg-min {
margin: 20px;
}
</style>
Bitte helfen, da viele der Lösung gepostet gelten nicht für meinen Code. Vielen Dank.
Wow ... Danke, es funktioniert, das CDN besonders, ... denke ich ... Danke an alle, die Eingabe. –
@ThabangRonin Sie sind willkommen :) –