Question

我需要一些Bootstrap 3的帮助。我的菜单切换不起作用：当我调整浏览器大小时菜单没有隐藏，所以当我点击切换按钮时没有任何反应。

我还希望将我的小背景与菜单对齐。

<!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>EGT DESIGN</title>


<meta name="viewport" content="width=device-width, inital-scale=1,maximum-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet"   
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link href="css/custom.less" rel="stylesheet"/>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- FAVICON -->
<link rel="icon" href="images/EGTico.ico" type="image/ico" sizes="16x16">

<!-- 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]-->


<nav class="navbar-inverse navbar-static-top" id="main-navbar" role="navigation">

<div class="container">
<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-
collapse">
<span class="sr only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a href="index.html"  class="brand"><img src="images/egtdesign-logo.png">EGT DESIGN</a>                 

</div>        

<div class="collapse navbar-collapse navbar-right" id="nav-collapse">

<ul class="nav navbar-nav " >
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span> 
HOME</a></li>
<li><a href="portfolio.html"><span class="glyphicon glyphicon-book"></span> 
PORTFOLIO</a></li>
<li><a href="" data-toggle="modal" data-target="#modal-contact-form"><span 
class="glyphicon glyphicon-envelope"></span> CONTACT</a>
</li>

<!--SOCIAL MEDIA -->
<li><a href="http://www.facebook.com"><img src="images/facebook_ico.png" 
alt="Facebook"></a></li>
<li><a href="http://www.twitter.com"><img src="images/twitter_ico.png"></a></li>
<li><a href="http://plus.google.com"><img src="images/google plus.png"></a></li>
<li><a href="https://www.linkedin.com/uas/login"><img src="images/Linkdin_ico.png"></a>
</li>

</ul>
</div><!--END MENU collapse-->

</div><!--END OF CONTAINER-->


</nav>

这是要对齐的图像的代码：

<div class="container">

<div class="bg-pattern">
<img src="images/BG w pattern 1.png"/>

</div>

<div class="bg-line1">
<img src="images/line w shine 1.png" >


</div>

<!--IMAGE CONTENT-->    
<div class="row">

<div class="bg-container">
<div class="col-lg-12">
<img class="img-responsive center-block" src="images/winning logo.png" >
<p class="text-center"><a href="#">Logo Design<span class="glyphicon glyphicon-chevron-
right"></span></a></p>
</div>

<div class="row">                           
<div class="col-lg-4">
<img src="images/brochure.png">
<p class="text-center"><a href="#">Brochure Design<span class="glyphicon glyphicon-
chevron-right"></span></a></p>
</div>

<!--CLEAR-->
<div class="clearfix visible-xs-block"></div>


div class="col-lg-4">
<img src="images/Label.png">
<p class="text-center"><a href="#">Label Design<span class="glyphicon glyphicon-
chevron-right"></span></a></p>
</div>

<div class="col-lg-4">
<img src="images/otherportfolio.png">
<p class="text-center"><a href="#" class="img-otherport">Other portfolio Design<span 
class="glyphicon glyphicon-chevron-right"></span></a></p>
</div>
</div>

</div>



</div><!--END OF CONTAINER-->


.bg-container{

margin-top:-5px;
background: url(../images/ContentBG.png);

}

.bg-line1{
margin-top: 0px;
padding-top:0px;

}

.bg-pattern-line2{
margin-left:-15px;
padding-top:610px;

}

感谢。

这是一些脚本，我忘了包含。

Answer 1

不同的菜单风格由javascript管理，特别是jQuery插件（collapse.js）你的HTML结构与我所看到的有关：

没有头标签关闭
没有身体标签

当然，您的代码中没有位置（您发布的代码段）中包含必要的javascript文件。

Bootstrap菜单切换不起作用

1 个答案: