我正在使用Yamm3 mega navbar,它是为bootstrap 3构建的。它在所有浏览器中都运行良好,但是IE8的导航栏在任何分辨率下都会被折叠。
我已经包含了 respond.min.js 和 html5shiv.min.js ,但它无效。如果您知道解决方案,请帮助我。感谢。
代码是:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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>
<!-- Demo navbar -->
<div class="navbar yamm navbar-default navbar-fixed-top eziBuyTop">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">List<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<ul class="col-sm-2 list-unstyled">
<li>
<p><strong>Section Title</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<p><strong>Links Title</strong></p>
</li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<p><strong>Section Title</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<p><strong>Section Title</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>
<ul>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<!-- Accordion demo -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Accordion<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group Item #1</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Ut consectetur ullamcorper purus a rutrum. Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group Item #2</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Nullam pretium fermentum sapien ut convallis. Suspendisse vehicula, magna non tristique tincidunt, massa nisi luctus tellus, vel laoreet sem lectus ut nibh. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Collapsible Group Item #3</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Praesent leo quam, faucibus at facilisis id, rhoncus sit amet metus. Sed vitae ipsum non nibh mattis congue eget id augue. </div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- Classic dropdown -->
<li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Classic<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#"> Action </a></li>
<li><a tabindex="-1" href="#"> Another action </a></li>
<li><a tabindex="-1" href="#"> Something else here </a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"> Separated link </a></li>
</ul>
</li>
<!-- Pictures -->
<li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Pictures<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="http://placekitten.com/150/190/"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="http://placekitten.com/150/190/"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="http://placekitten.com/150/190/"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="http://placekitten.com/150/190/"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="http://placekitten.com/150/190/"></a></div>
<div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="150x190" src="http://placekitten.com/150/190/"></a></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript-->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="demo/js/bootstrap.min.js"></script>
</body>
</html>