我需要一些有关 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;
}
谢谢。
还有一些脚本，我忘了包括在内。
最佳答案
不同的菜单样式由 javascript 管理，特别是 jQuery 插件 (collapse.js)，据我所知，您的 HTML 结构存在缺陷:
- 没有头标闭合
- 没有正文标签
当然，您的代码(您发布的片段)中没有包含必要的 javascript 文件。
关于css - Bootstrap 菜单切换不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25881502/