Question

因此，它适用于两个页面的移动视图-我的个人资料和我的预订。但是，当我单击主页上的切换按钮时，它不会再次关闭。

   <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="/Default.aspx" class="navbar-brand">
            <img src="/images/logo.png" style="width: 85px; margin-top: 16px; 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-header {
    float: left;
  }
}

.navbar-collapse {
  max-height: 340px;
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-overflow-scrolling: touch;
}

.navbar-collapse:before,
.navbar-collapse:after {
  display: table;
  content: " ";
}

.navbar-collapse:after {
  clear: both;
}

.navbar-collapse:before,
.navbar-collapse:after {
  display: table;
  content: " ";
}

.navbar-collapse:after {
  clear: both;
}

.navbar-collapse.in {
  overflow-y: auto;
}

@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: auto;
  }
  .navbar-collapse .navbar-nav.navbar-left:first-child {
    margin-left: -15px;
  }
  .navbar-collapse .navbar-nav.navbar-right:last-child {
    margin-right: -15px;
  }
  .navbar-collapse .navbar-text:last-child {
    margin-right: 0;
  }

我什至尝试了JQuery，但是它不会让步。我还查看了无法使用的主页的源代码，而且似乎无法检测到那里的任何问题，因为我实际上将另一个页面的页眉/导航应用于所有页面。

我的导航切换仅在两页上有效，而在主页上无效

0 个答案: