Bootstrap 3 mehrere Navigationsleisten
Ich habe Probleme mit mehreren Bootstraps in Twitter Bootstrap 3. Zuerst funktioniert Navbar mit Größenänderung und reagiert. Die zweite Navigationsleiste funktioniert in der normalen Auflösung nicht richtig, aber wenn ich versuche, die Größe zu ändern, um darauf zu reagieren, und nachdem ich die Größe geändert habe, funktioniert sie in Ordnung.
Hier ist ein Code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="wrap">
<div class="navbar navbar-inverse navbar-static-top hr" style="background:black;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand logo"></div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li><a href="#">Item1</a></li>
<li class="divider-vertical"></li>
<li><a href="#about">Item2</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item3</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item4</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item6</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">Item7</a></li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hr" style="background:#ececec; border-top:none; ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse2">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse2 collapse">
<ul class="nav navbar-nav" style="font-size:17px;">
<li><a href="#">it1d</a></li>
<li class="divider-vertical"></li>
<li><a href="#about">it2d</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">it3d</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">it4d</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">it5d</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">it6d</a></li>
<li class="divider-vertical"></li>
<li><a href="#contact">it7d</a></li>
</ul>
</div>
</div>
</div>
<!-- FOOTER -->
Und Bootply:http://bootply.com/101032
Beste Grüße und vielen Dank für die Hilfe.
Edit: Ok ich habe Auflösung.
Wenn Sie das gleiche Problem haben, müssen Sie das Datenziel für die zweite Navigationsleiste ändern und beim Starten von div add (ich habe es für .main-nav geändert) und nach dem Hinzufügen Ihrer Datenzielklasse am Ende des Navigationsleistenelements.
<div class="collapse navbar-collapse main-nav">
Hier ist ein Link zu bootply, wie es richtig gemacht wird