html - 根据屏幕大小有条件地显示 RenderBody

转载作者：太空宇宙更新时间：2023-11-04 06:06:06

我试图在我的 _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;
}

最佳答案

您可以使用 renderbody 一次。如果您需要第二个渲染体，则可以改用 RenderSection。在链接中简单解释。

https://exceptionnotfound.net/asp-net-mvc-demystified-layout-viewstart-renderbody-and-rendersection/

关于html - 根据屏幕大小有条件地显示 RenderBody，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56852130/

文章推荐：将 uint8_t 数组转换为 c 中的 char 数组

文章推荐： python - Tkinter 对象在 Linux 上不工作

文章推荐： linux - 链接分隔的单词

文章推荐： php - 如何在 table 上放一个粘头

mysql随机更新两个日期之间的日期列(有条件)
如何在 2014-10-04 - 2014-10-30 仅工作日和 08.00 - 20.00 之间随机更新日期列？ 2014-10-04 - 2014-10-30 random working-da
将二维数组转换为一维数组(有条件)
我有一个二维 (3x7) 数组，我想转换为一维数组，以便我提供的行位于中心。行值可能沿途变化，但必须位于中心。 #define numRows 3 #define numCols 7 #define
Jpa OneToMany 有条件
我有2张 table : 第一个是“人”: person_id, 人名第二个是“PersonsGraphs”: person_id1, person_id2, 关系类型我正在寻找一种建立“家谱”的
java - @JsonIgnore 有条件
是否可以在序列化 JSON 响应的同时根据 If 条件排除某些元素？ if(a == 1) { //show element } else { //don't show element }
java - @JsonIgnore 有条件
是否可以在序列化 JSON 响应的同时根据 If 条件排除某些元素？ if(a == 1) { //show element } else { //don't show element }
javascript - jQuery 有条件
尝试使用 jQuery 编写一个条件，该条件基本上说明，如果 div.gathering 不包含 a.cat-link，则执行以下操作。我已经尝试过以下方法，但似乎不起作用。有人能解释一下吗？ if(
c - 在列表中插入节点的副本(有条件)
该练习要求插入值 x 的副本(这也是要在列表中搜索的值)，但前提是该位置是另一个值 n 的倍数。未指定副本应插入到 x 值之前还是之后。我的问题是并非在所有情况下都插入副本。我认为问题在于，当我插入
c - (有条件？)在函数中创建局部变量
我遇到了这个[问题]:How can I store values into a multi-parameter struct and pass typedef struct to a functio
java - 井字游戏(有条件)
出于某种原因，当我编写 getWinner() 时，它仅适用于 2 种情况(最后一行)。就对角线和列而言，我拥有其他一切，但第 2 行(嗯，三，但数组，所以 2)基本上只适用于 o。只有当 o 位于
MYSQL - 将一列复制到同一个表中的另一列 - 有条件
我有一个问题。我想将“guid”列中的值复制到“帖子内容” 所有行都在一个表“wp-posts”中 “postparent”列中的一行有一个值，而“ID”列中的另一项也有相同的值我必须做的事情是
MySQL - 合并两个表 - 有条件
我想将两个像这样的表合并到一个表中，并为重复的键行添加合并表中最旧的 DateAdded 值。 (Key1,Key2) 是主键。 +-----------+-----------+------+---
mysql - 选择具有最大值的唯一行(有条件)
通过下面的表格和数据，我试图获得最高的 effective_from每个唯一 brand 小于当前时间戳的值/model组合 - 实际上是每件商品的当前价格。 CREATE TABLE things
mysql - 如何删除未知号码的最后一条记录(有条件)？
您能告诉我如何删除未知号码的最后一条记录(有条件)吗？例如，在这种情况下我想删除id为6到10的记录。注意:该表和记录不是恒定的。 +----+-----+---------+ | id | ur
php - 添加时间到mysql时间戳列，有条件
这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the
mysql - 多次计算带有外键的子表，有条件
我有两个表，标签 -> id,name,description,user,status 标签_连接。 -> id, Label_id, 类别所以有多个类别，假设 1 => 新的，2 => 旧的。
java - 将每个单词的第一个字母移动到末尾并添加一个字符，有条件
好的，我会长话短说。这是我的代码 String s = edittextkata.getText().toString(); String[] vowels = {"a","
Linux 查找和替换(有条件)
我有一个非常具体的要求，我发现很难做到，我需要查找并替换文件中的某些行，但问题是文本不同，唯一的好处是它们都有一个 .[扩展名] 例如: 30/07/2012 14:46 17
MongoDB updateMany 有条件
我有一个大型数据库，其中存在各种不一致之处。我想澄清的项目之一是根据人口更改国家/地区状态。数据样本是: { "_id" : "D", "name" : "Deutschland", "pop" :
arrays - 将范围(有条件)中的唯一值组合到另一个范围中
我需要将范围(有条件)中的唯一值组合到同一行的另一个范围中。其实我前两天发过类似的问题Link所提供的答案在我提出上述问题时有效。但后来，我遇到了一个新问题，我宁愿问一个新的问题，让它更清楚: (
VBA - 将字符串中的字符拆分、复制和粘贴到另一个单元格(有条件)
我刚开始使用 VBA，并且正在努力处理需要清理的工作表。我有一列包含混合邮政编码和城市名称的字符串。我想从 A 列中提取邮政编码并放在 B 列中，并在 C 列中提取带有下划线的城市名称。我的(示例

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 根据屏幕大小有条件地显示 RenderBody

_Layout.cshtml

CSS