我真的是 Bootstrap 网络编程的新手，我试图自学这种类型的网站设计，但在我最近的元素中遇到了一个问题。我有 2 个不同的母版页，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>
最佳答案
我能够使用以下代码解决此问题。
@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;
}
}
关于html - 汉堡包菜单未显示在我的网页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37158793/