html - 根据屏幕尺寸有条件地显示 RenderBody
问题描述
我正在尝试使用媒体查询_Layout.cshtml来确定显示哪个导航栏。
在较大的设备上，我想使用 Bootstrap ( col-2) 显示垂直导航栏，并且我想RenderBody()( col-10) 不显示水平导航栏。
在较小的设备上，水平导航栏显示为屏幕的整个宽度，并且RenderBody()会在下方。
我不确定媒体查询是否真的有效，因为显示了以下错误。
The "RenderBody" method has already been called.
所以我的问题是如何根据屏幕大小有条件地渲染？
请注意，我只是在尝试将其拼凑起来，绝不是专家。离得很远。
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@* @Styles.Render("~/Content/css") *@
@*@Styles.Render("~/Content")*@
@Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/animate.min.css" rel="stylesheet">
<link href="~/Content/ionicons.min.css" rel="stylesheet">
<link href="~/Content/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/magnific-popup.css" rel="stylesheet">
<link href="~/Content/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/Content/strap4.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="~/Content/style.css" rel="stylesheet">
<link href="~/Content/pure.css" rel="stylesheet">
</head>
<body>
<!--==========================
Top Bar
============================-->
<section id="topbar" class="d-none d-lg-block">
<div class="container clearfix">
<div class="contact-info pull-left">
<i class="fa fa-envelope-o"></i> <a href="mailto:shipleyswine@yahoo.com">shipleyswine@yahoo.com</a>
<i class="fa fa-phone"></i> Orders: 1-866-376-8986 (Toll Free) • 740-745-2911
</div>
<div class="social-links pull-right">
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.facebook.com/shipleyswine/" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/explore/locations/289480962/shipley-swine-genetics/" class="instagram"><i class="fa fa-instagram"></i></a>
<a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</section>
<!--==========================
Header
============================-->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<a href="@Url.Action("Index", "Home")" class="scrollto"><img src="~/Assets/Images/ssHeader.png" height="40px" width="150px"></a>
</div>
<!-- #nav-menu-container -->
</div>
</header><!-- #header -->
<div id="HorizontalNav" class="container">
<div class="">
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Yorkshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/york.jpg" /><div id="imageText"class="w-100 h-100">Yorkshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Duroc" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/duroc.jpg" /><div id="imageText"class="w-100 h-100">Duroc</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Berkshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/berk.jpg" /><div id="imageText"class="w-100 h-100">Berkshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Exotic" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/exotic.jpg" /><div id="imageText"class="w-100 h-100">Exotic</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Hampshire" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/hamp.jpg" /><div id="imageText"class="w-100 h-100">Hampshire</div>
</a>
</div>
<div class="breedOption" style="height:auto; margin:auto; text-align:center; position:relative;">
<a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Other" })">
<img class="img-rounded img-responsive mx-auto" src="~/Assets/breedMenu/Other.jpg" /><div id="imageText"class="w-100 h-100">Other</div>
</a>
</div>
</div>
</div>
<a href="#">
<div id="salealert" class="alert alert-danger" role="alert">
Summer Pricing, Most Boars up to 50% off!
</div>
</a>
<div id="VerticleNav" class="row">
<div class="col-lg-2 col-md-3 col-sm-3">
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected text-center"><a href="#" class="pure-menu-link">Boars</a></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Yorkshire" })" class="pure-menu-link"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/york.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Yorkshire</div></a></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Duroc" })" class="pure-menu-link"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/duroc.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Duroc</div></a></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Berkshire" })" class="pure-menu-link"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/berk.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Berkshire</div></a></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Exotic" })" class="pure-menu-link"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/exotic.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Exotic</div></a></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Hampshire" })" class="pure-menu-link"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/hamp.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Hampshire</div></a></li>
<li class="pure-menu-item text-center w-100" style="display: inline-block;"><a href="@Url.Action("SelectBoar", "Boars", new { selectedBreed = "Other" })" class="pure-menu-link"><img class="rounded img-responsive mx-auto" src="~/Assets/breedMenu/Other.jpg" style="height: 50%; width: 50%; max-height:40%; max-width: 40%;" /><div style="color: white; position: absolute;top: 70%;left: 50%; bottom: 5px;transform: translate(-50%, -50%);">Other</div></a></li>
</ul>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-9">
@RenderBody()
</div>
</div>
<div id="HorizontalNav">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
CSS
@media (min-width: 320px) and (max-width: 480px) {
#HorizontalNav{
display:block;
}
#VerticleNav{
display:none;
}
}
@media (min-width: 481px) and (max-width: 767px) {
#HorizontalNav {
display: block;
}
#VerticleNav {
display: none;
}
}
@media (min-width: 768px){
#HorizontalNav {
display: none;
}
#VerticleNav {
display: inline-block;
}
}
#imageText {
position: absolute;
color: white;
top: 0;
/* left: 0; */
/* right: 0; */
/* bottom: 0; */
/* transform: translate(-50%, -50%); */
font-size: 1rem;
margin-top: 40%;
padding-left:2.5px;
padding-right:2.5px;
}
.breedMenu {
width: 100%;
height: 100%;
max-height: 100%;
}
.breedOption {
width: 16.66%;
max-width: 16.66%;
min-width: 16.66%;
float: left;
height: 100%;
max-height: 100%;
background: center;
background-repeat: no-repeat;
text-align: center;
color: white;
}
.boarlabel {
padding-top: 83px;
padding-bottom: 0px;
font-family: AmericanCaptain, Calibri, sans-serif;
font-size: 14pt;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.breedOption:hover {
cursor: pointer;
color:black;
}
.breedOption a {
text-decoration: none;
color: inherit;
}
.listcontainer{
height:auto;
}
#salealert {
text-align:center;
font-size:large;
margin-top:20px;
}
#salealert:hover {
background-color: #ffe6e6;
}
解决方案
您可以使用一次渲染体。如果你需要第二个渲染体，你可以使用 RenderSection。在链接中简单解释。
https://exceptionnotfound.net/asp-net-mvc-demystified-layout-viewstart-renderbody-and-rendersection/
推荐阅读
- multivalue - Pick DB 极慢的 tcl 查询
- android - 我不明白为什么由于 0 的大小在哪里
- flutter - 当在真实设备上的 BottomSheet 聚焦时，TextField 留在键盘后面，但在模拟器上工作
- python - 制作时间增量字符串的有效方法？
- python - 在 oauth2session 中包含 requests-oauthlib 的授权
- java - 如果 - 否则不起作用 - 哪里可能出错
- node.js - 访问我的公共文件夹中的 JSON 文件 - Nextjs
- r - R如果data.frame变量包含一个向量，如何对向量进行操作/过滤？
- javascript - Vue 2如何使用firebase实时更新删除
- node.js - Socketio颤动无法连接到heroku