打开后,如何使导航栏折叠回去?

时间:2018-10-31 20:31:48

标签: html css

因此,我有主页和第二页。打开导航栏开关后,这两个开关不会关闭。在导航栏中,还有另外两个页面,分别为“我的个人资料”和“我的预订”。这两个将再次关闭,但由于某种原因,它不会在主页和第二页上关闭。

<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;
}

0 个答案:

没有答案