Bootstrap 3多个导航栏 [英] Bootstrap 3 multiple navbars
问题描述
我在Twitter Bootstrap 3中的多个引导时遇到问题。
First Navbar在调整大小和响应时工作正常。
第二个navbar在正常分辨率下不能正常工作，但是当我尝试做大小响应和调整大小后它的工作正常。
I'm having trouble with multiple bootstrap in Twitter Bootstrap 3. First Navbar is working ok with resizing and responsive. Second navbar doesn't work properly in normal resolution, but when i try to do size to responsive and after resize it's working okay.
这里有一些代码：
<!--[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 -->
And Bootply：
http://bootply.com/101032
And Bootply: http://bootply.com/101032
感谢您的帮助。
编辑：
Ok我有决议。
Ok I have resolution.
如果你有同样的问题，你必须改变第二个导航栏的数据目标和开始div添加（我更改了.main-nav）
和添加数据目标类后的导航栏项目。
If you have same problem you have to change data target for second navbar and in starting div add ( i changed for .main-nav) and after add your data-target class on the end of navbar item.
<div class="collapse navbar-collapse main-nav">
以下链接指向bootply如何正确处理
Here's link to bootply how to do it proper
推荐答案
尝试更改
< div class =navbar-collapse2 collapse>
到
< div class =navbar-collapse collapse>
这篇关于Bootstrap 3多个导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
