因此,我有主页和第二页。打开导航栏开关后,这两个开关不会关闭。在导航栏中,还有另外两个页面,分别为“我的个人资料”和“我的预订”。这两个将再次关闭,但由于某种原因,它不会在主页和第二页上关闭。
<nav class="navbar navbar-default navbar-top">
<div class="container" style="max-width: 1140px;">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a href="/" class="navbar-brand"><img src="/images/logo.png" style="width: 85px; margin-top: 20px; float: left;"></a>
</div>
<div class="logo_mobile" style="display: none;">
<a class="navbar-brand" href="#">
<img src="/images/logo.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-target=".navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/"><font>Home</font></a></li>
<%--<li><a href="#services"><font>Services</font></a></li>--%>
<%--<li runat="server" id="btn_map"><a href="#map"><font>Search</font></a></li>--%>
<li runat="server" id="btn_contactUs"><a href="#contact"><font>Contact Us</font></a></li>
<li runat="server" id="btn_myaccount"><a href="/COM/MyProfile.aspx"><font>My Profile</font></a></li>
<li runat="server" id="btn_myreservation"><a href="/COM/MyReservation.aspx"><font>My Reservation</font></a></li>
<li runat="server" id="btn_signup"><a href="/COM/signup.aspx"><font>Sign Up</font></a></li>
<li runat="server" id="btn_login"><a href="/COM/signin.aspx"><font>Log In</font></a></li>
<li runat="server" id="btn_signout"><a href="/Logout.aspx"><font>Log Out</font></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</nav>
和CSS:
.navbar > .container .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 1px 0 0;
}
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}