我的网页上没有显示汉堡菜单

时间:2016-05-11 09:44:17

标签: html css twitter-bootstrap

我对自举网络编程非常陌生,我正在尝试自学这种类型的网站设计,在处理我最近的项目时,我遇到了一个问题。我有2个不同的母版页,1个用于任何计算机/笔记本电脑,1个用于电话/平板电脑(这主要是为了改变菜单的显示方式)现在,我遇到的问题是汉堡包菜单没有显示出来虽然使用平板电脑,但它使用任何移动设备时。下面是代码片段的链接以及我的代码的HTML部分,我使用的是基本的bootstrap 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>

1 个答案:

答案 0 :(得分:0)

我能够使用以下代码修复此问题。

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