【发布时间】：2017-04-05 22:04:51
【问题描述】：
我在导航部分放了一个带有经典引导响应菜单的菜单，小屏幕上带有可切换按钮。 我的问题是，当我切换按钮以显示菜单时，带有 id= 内容的父 div 不会关闭，但菜单会溢出 div。 我该如何解决？
这里是代码
<body>
<nav id="header" class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navmenu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/art-of-hair.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navmenu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home<span class="sr-only">Home</span></a></li>
<li><a href="#">Hair<br>Styles</a></li>
<li class=""><a href="#" class="">About</a></li>
<li class=""><a href="#" class="">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="contents">
<div class="jumbotron">
<h4>We bring out your beauty...</h4>
<h6>Set an appointment</h6>
<p><a class="btn btn-lg" href="tel:5671234009" role="button"><span class="glyphicon glyphicon-earphone"></span>567-1234-009</a></p>
</div> <!-- End Jumbotron -->
<div id="featured">
</div> <!-- #featured -->
</div> <!-- #contents -->
<div id="footer">
</div> <!-- #footer -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="js/main.js"></script> -->
</body>
这里是css：
/** {
margin: 0;
}*/
body {
font-family: 'Alice', serif;
}
/****************** Nav Section ************************/
nav#header {
background:url('../images/header.png') no-repeat;
/*min-height:200px;*/
color:#fff;
margin-bottom:0;
}
#logo {
width: 300px;
height:150px;
}
#navmenu {
margin:0px 120px 0 0;
color: #fff;
}
ul.nav.navbar-nav.navbar-right li {
background-color: #301b14;
height:180px;
font-weight: bold;
text-transform: uppercase;
margin:10px;
border-radius: 5px;
text-align: center;
}
ul.nav.navbar-nav.navbar-right li a {
color: #fff;
font-weight: bold;
text-transform: uppercase;
position: relative;
top: 35%;
left: 0;
padding-top: 5px;
}
ul.nav.navbar-nav.navbar-right li.active {
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
ul.nav.navbar-nav.navbar-right li.active a{
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
ul.nav.navbar-nav.navbar-right li:hover {
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
ul.nav.navbar-nav.navbar-right li a:hover {
color: #301b14;
background-color: #e4dfc1;
border-radius: 5px;
}
/****************** End Nav Section ************************/
/****************** Content Section ************************/
.jumbotron {
letter-spacing: 2px;
background: url('../images/jumbo-1000.jpeg') no-repeat center;
height:559px;
margin:0;
border-top: 10px solid rgba(48,27,20,0.9);
border-bottom: 10px solid rgba(48,27,20,0.9);
}
.jumbotron h6, .jumbotron h4 {
text-align: right;
color:#fff;
font-size: 200%;
margin-right: 20px;
margin-top: 60px;
}
.jumbotron p {
text-align: right;
font-size: 300%;
margin-right: 20px;
margin-top: 0px;
}
div.jumbotron p a.btn.btn-lg{
background-color: #E4DFC1;
color:#301B14;
border:2px solid #301B14;
font-weight: bold;
-webkit-transition: font-size 1s; /* For Safari 3.1 to 6.0 */
transition: font-size 1s;
}
div.jumbotron p a.btn.btn-lg:hover{
font-size: 0.8em;
}
.jumbotron p a span{
margin: 6px;
}
/****************** End Content Section ************************/
/****************** Footer Section ************************/
/****************** End Footer Section ************************/
/********** Large devices only **********/
@media (min-width: 1200px) {
}
/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
/* Home Page */
/* End Home Page */
}
/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
#navmenu {
margin:30px 0px 0 0;
color: #fff;
}
.jumbotron {
background: url('../images/jumbo-900.jpeg') no-repeat center;
height:416px;
margin:0;
}
}
/********** Extra small devices only **********/
@media (max-width: 767px) {
/* Header */
#navmenu {
margin:150px 0 0 0;
color: #fff;
background-color: #886744;
}
ul.nav.navbar-nav.navbar-right li a {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
ul.nav.navbar-nav.navbar-right li {
background-color: #301b14;
font-weight: bold;
text-transform: uppercase;
margin:1px;
border-radius: 0 5px 5px 5px;
height: auto;
}
/* End Header */
/* Contents */
/*#contents {
margin-top:180px;
}*/
.jumbotron {
background: url('../images/jumbo-770.jpeg') no-repeat center;
height:297px;
margin:0;
}
/* End Contents */
/* Footer */
/* End Footer */
/* Home Page */
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
/* Header */
#logo {
width: 150px;
height:90px;
}
nav#header {
height:120px;
}
#navmenu {
margin:68px 0 0 0;
color: #fff;
background-color: #886744;
}
ul.nav.navbar-nav.navbar-right li {
background-color: #301b14;
font-weight: bold;
text-transform: uppercase;
margin:1px;
border-radius: 0 5px 5px 5px;
}
/* End Header */
/* Home page */
/*#contents {
margin-top:180px;
}*/
.jumbotron {
background: url('../images/jumbo-480.jpeg') no-repeat center;
height:185px;
margin:0;
}
}
【问题讨论】：
-
id="contents" 在哪里？
-
哦，我忘了。我将添加代码
-
我用整个代码更新问题
标签： javascript jquery html css twitter-bootstrap