ハンバーガーメニューが私のウェブページに表示されない

Question

私はブートストラップのウェブプログラミングに本当に新しく、このタイプのウェブサイトデザインを自分自身で教えようとしています。最近のプロジェクトでは問題に遭遇しました。私は2つの異なるマスターページを持っています.1つはコンピュータ/ラップトップ用、もう1つは携帯電話/タブレット用です（これは主にメニューの表示方法を変えるものです）。問題はハンバーガーメニューが表示されないことですタブレットですが、モバイルデバイスを使用しています。以下はコードスニペットへのリンクで、私のコードのHTML部分ですが、私は基本的なブートストラップCSSを使用していますので、7000行をダウンロードできます。

https://codepen.io/bennickless/pen/dMrzEV

<div class="navbar navbar-inverse navbar-fixed-top"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 


       <div class="navbar-collapse collapse fullscreen-navbar-collapse"> 
        <asp:LoginView ID="HomeLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, Administrators, General Managers, Support Workers, Managers"> 
           <ContentTemplate> 
            <div id="MainMenu10"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="../../../../default.aspx" data-parent="#MainMenu10">Home </a> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 


        <asp:LoginView ID="AddressLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers, Support Workers, Senior Workers, Managers"> 
           <ContentTemplate> 
            <div id="MainMenu11"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="../../../../Homes/Address_Book/Address_Book.aspx" data-parent="#MainMenu11">Address Book </a> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 

        <asp:LoginView ID="SysAdminLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters"> 
           <ContentTemplate> 
            <div id="MainMenu5"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="#demo7" data-toggle="collapse" data-parent="#MainMenu5">+ System Admin <i class="fa fa-caret-down"></i></a> 
              <div class="collapse" id="demo7"> 
               <a class="list-group-item2" href="../../../../Staff/Masters/Manage_Users.aspx" data-parent="#MainMenu5">Manage User</a> 
               <a class="list-group-item2" href="../../../../Staff/Masters/New_User.aspx" data-parent="#MainMenu5">New User</a> 
              </div> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 

        <asp:LoginView ID="HouseLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers, Managers, Support Workers, Senior Workers, Administrators"> 
           <ContentTemplate> 

            <div id="MainMenu4"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="#demo6" data-toggle="collapse" data-parent="#MainMenu4">+ House files <i class="fa fa-caret-down"></i></a> 
              <div class="collapse" id="demo6"> 
               <a class="list-group-item2" href="../../../Homes/Calendar/Home_Calendar.aspx" data-parent="#MainMenu4">Home Calendar</a> 
               <a class="list-group-item2" href="../../../../Homes/Appliances/View_Fridge_Temp.aspx" data-parent="#MainMenu4">Fridge Tempatures</a> 
               <a class="list-group-item2" href="../../../../Homes/Appliances/View_Freezer_Temp.aspx" data-parent="#MainMenu4">Freezer Tempatures</a> 
               <a class="list-group-item2" href="../../../../Homes/Document_Forms/View_Hsome_Documents.aspx" data-parent="#MainMenu4">Home Documents</a> 
              </div> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 


        <asp:LoginView ID="GeneralMLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers"> 
           <ContentTemplate> 
            <div id="MainMenu1"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="#demo10" data-toggle="collapse" data-parent="#MainMenu1">+ General Manager </a> 
              <div class="collapse" id="demo10"> 
               <a class="list-group-item1" href="#Homes" data-toggle="collapse" data-parent="#Homes">+ Homes</a> 
               <div class="collapse list-group-submenu" id="Homes"> 
                <a class="list-group-item2" href="../../../../Staff/General_Managers/New_Homes_Wizard.aspx" data-parent="#Homes">Create New Homes</a> 
                <a class="list-group-item2" href="../../../../Staff/General_Managers/Edit_Homes.aspx" data-parent="#Homes">Edit Homes</a> 
                <a class="list-group-item2" href="../../../../Staff/General_Managers/Edit_Home_Viewers.aspx" data-parent="#Homes">Edit Home Viewers</a> 
                <a class="list-group-item2" href="../../../../Homes/Vacancies/Home_Vacancies.aspx" data-parent="#Homes">Edit Home Vacancies</a> 
               </div> 
               <a class="list-group-item1" href="#Post" data-toggle="collapse" data-parent="#Post">+ Post</a> 
               <div class="collapse list-group-submenu" id="Post"> 
                <a class="list-group-item2" href="../../../../Staff/Group/Posts/Edit_Post.aspx" data-parent="#Post">View Post</a> 
                <a class="list-group-item2" href="../../../../Staff/Group/Posts/New_Post.aspx" data-parent="#Post">New Post</a> 
               </div> 
              </div> 

             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 

        <asp:LoginView ID="AdministrationLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers, Administrators, Managers"> 
           <ContentTemplate> 
            <div id="MainMenu3"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="#demo3" data-toggle="collapse" data-parent="#MainMenu3">+ Administration </a> 
              <div class="collapse" id="demo3"> 
               <a class="list-group-item1" href="#Appliances" data-toggle="collapse" data-parent="#Appliances">+ Appliances</a> 
               <div class="collapse list-group-submenu" id="Appliances"> 
                <a class="list-group-item2" href="../../../../Homes/Appliances/Fridge.aspx" data-parent="#Appliances">Fridge</a> 
                <a class="list-group-item2" href="../../../../Homes/Appliances/Freezers.aspx" data-parent="#Appliances">Freezer</a> 
               </div> 

               <div id="list-group panel"> 
                <a class="list-group-item1" href="../../../General/Authorities/Authorities.aspx" data-parent="#Mainmenu3">Authorities</a> 
               </div> 

               <a class="list-group-item1" href="#Backgrounds" data-toggle="collapse" data-parent="#Backgrounds">+ Backgrounds</a> 
               <div class="collapse list-group-submenu" id="Backgrounds"> 
                <a class="list-group-item2" href="../../../../General/Religions/Religions.aspx" data-parent="#Backgrounds">Relegion</a> 
                <a class="list-group-item2" href="../../../../General/Ethnicities/Ethnicities.aspx" data-parent="#Backgrounds">Ethnicities</a> 
               </div> 


               <a class="list-group-item1" href="#Placements" data-toggle="collapse" data-parent="#Placements">+ Placements</a> 
               <div class="collapse list-group-submenu" id="Placements"> 
                <a class="list-group-item2" href="../../../../Staff/Placements/New_Referral.aspx" data-parent="#Placements">New placement</a> 
                <a class="list-group-item2" href="../../../../Staff/Placements/End_Referral.aspx" data-parent="#Placements">End Placement</a> 
                <a class="list-group-item2" href="../../../../Staff/Placements/New_Placement.aspx" data-parent="#Placements">New Referal</a> 
                <a class="list-group-item2" href="../../../../Staff/Placements/End_Placement.aspx" data-parent="#Placements">End Referal</a> 
               </div> 

               <a class="list-group-item1" href="#Education" data-toggle="collapse" data-parent="#Education">+ Education</a> 
               <div class="collapse list-group-submenu" id="Education"> 
                <a class="list-group-item2" href="../../../../General/Education/Schools.aspx" data-parent="#Education">Schools</a> 
               </div> 

               <a class="list-group-item1" href="#PoliciesDoc" data-toggle="collapse" data-parent="#PoliciesDoc">+ Policies/Documents </a> 
               <div class="collapse list-group-submenu" id="PoliciesDoc"> 
                <a class="list-group-item2" href="../../../../Homes/Document_Forms/Document_Types.aspx" data-parent="#PoliciesDoc">Add/Edit Documents</a> 
                <a class="list-group-item2" href="../../../../Homes/Document_Forms/Upload_Home_Document.aspx" data-parent="#PoliciesDoc">Update House Documents</a> 
                <a class="list-group-item2" href="../../../../Staff/Group/Group_Document_Forms/New_Group_Template.aspx" data-parent="#PoliciesDoc">Update Group Template</a> 
                <a class="list-group-item2" href="../../../../Staff/Group/Group_Document_Forms/New_Group_Policy.aspx" data-parent="#PoliciesDoc">Update Group Policy</a> 
               </div> 

              </div> 

             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 

        <asp:LoginView ID="ChildLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers, Administrators, Support Workers, Managers"> 
           <ContentTemplate> 
            <div id="MainMenu12"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="#Childdetails" data-toggle="collapse" data-parent="#MainMenu12">+ Child Details</a> 
              <div class="collapse" id="Childdetails"> 
               <a class="list-group-item2" href="../../../../Records/Forms/Search_Children.aspx" data-parent="#Childdetails">Search Child Details</a> 
              </div> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 


        <asp:LoginView ID="TemplateLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers, Administrators, Support Workers, Managers"> 
           <ContentTemplate> 
            <div id="MainMenu13"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="../../../../Staff/Group/Group_Document_Forms/View_Group_Templates.aspx" data-parent="#MainMenu13">Group Templates</a> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 

        <asp:LoginView ID="PoliciesLV" runat="server"> 
         <RoleGroups> 
          <asp:RoleGroup Roles="Masters, General Managers, Administrators, Support Workers, Managers"> 
           <ContentTemplate> 
            <div id="MainMenu14"> 
             <div class="list-group panel"> 
              <a class="list-group-item list-group-item-success" href="../../../../Staff/Group/Group_Document_Forms/View_Group_Policies.aspx" data-parent="#MainMenu14">Group Policies</a> 
             </div> 
            </div> 
           </ContentTemplate> 
          </asp:RoleGroup> 
         </RoleGroups> 
        </asp:LoginView> 

        <ul class="nav navbar-nav navbar-right"> 
         <li> 
          <asp:LoginView runat="server" ViewStateMode="Disabled"> 
           <AnonymousTemplate> 
            <ul class="nav navbar-nav navbar-right"> 
             <li><a href="~/Account/Login" runat="server">Log in</a></li> 

            </ul> 
           </AnonymousTemplate> 
           <LoggedInTemplate> 
            <ul class="nav navbar-nav navbar-right"> 
             <li> 
              <asp:LoginStatus runat="server" OnLoggingOut="Unnamed_LoggingOut" LogoutPageUrl="~/" LogoutText="Log off" LogoutAction="Redirect"></asp:LoginStatus> 
             </li> 
            </ul> 
           </LoggedInTemplate> 
          </asp:LoginView> 
         </li> 

        </ul> 
       </div> 
      </nav> 
     </div> 

Answer 1

私は、次のコードでこの問題を解決することができました。

@media (max-width: 990px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
} 

@media (min-width: 1300px) { 
    .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: none; 
    } 
} 

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
     .navbar-header { 
     float: none; 
    } 
    .navbar-toggle { 
     display: block; 
    } 
    .navbar-collapse { 
     border-top: 1px solid transparent; 
     box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin: 7.5px -15px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
}