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 上放一个粘头

c - 大小(数组)/大小(整数)
这个问题在这里已经有了答案: C sizeof a passed array [duplicate] (7 个回答) 8年前关闭。在一个函数中，我声明了一个数组: int char_count_ar
linux - 为什么文件系统有自己的 block 大小，而不是使用硬盘 block 大小？
简而言之，文件系统如何与 block 设备通信？最佳答案我对 block 大小不太了解。我认为 ext4(Linux)的文件系统的 block 大小是 4KB，考虑到现代处理器的页面大小(4KB)
mysql - tinyint(大小)，varchar(大小): "size" explaination
我知道 tinyint(1) 和 tinyint(2) 具有相同的存储空间范围。唯一的区别是显示宽度不同。这是否意味着 tinyint(1) 将存储所有类型的整数但只正确显示 0 到 9 的范围？而
c++ - 大小 8 的无效读取，大小 8 的无效写入 (Valgrind)
今晚我已经研究了以下代码几个小时，但我只是摸不着头脑。当使用函数从标准输入填充数组时，我不断收到“大小 8 的无效写入”和“大小 8 的无效读取”。如有任何帮助，我们将不胜感激...我知道 Sta
c - 大小 8 的无效读取，大小 8 的无效写入，C
我有一个 valgrind 错误，我不知道如何摆脱它们: ==5685== Invalid read of size 8 ==5685== at 0x4008A1: main (in /home
Hadoop block 大小 vs 拆分 vs block 大小
我对 Hadoop 的概念有点困惑。 Hadoop block 大小、拆分大小和 block 大小之间有什么区别？提前致谢。最佳答案 block 大小和 block 大小相同。拆分大小可能与
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
xamarin - 减少 Xamarin.Forms 中的 APK 大小，APK 大小 80MB
无法将 xamarin apk 大小减少到 80 MB 以下，已执行以下操作: 启用混淆器配置:发布平台:事件(任何 CPU)。启用 Multi-Dex:true 启用开发人员检测(调试和分析)
python - 读取多个 csv 文件(大小 mxm)并加载为 n 维数组(大小 nxmxm)(不连接)
我正在开发一个程序，需要将大量 csv 文件(数千个)加载到数组中。 csv 文件的尺寸为 45x100，我想创建一个尺寸为 nx45x100 的 3-d 数组。目前，我使用 pd.read_csv(
react-native - Flutter apk/ipa 大小 vs React Native apk/ipa 大小
Hello World 示例的 React Native APK 大小约为 20M (in recent versions)，因为支持不同的硬件架构(ARMv7、ARMv8、X86 等)，而同一应用程
python - 将 n 个元素(大小 = 2 字节，十进制)的列表拆分为 2n 个元素(大小 = 1 字节，十六进制)
我有一个包含 n 个十进制元素的列表，其中每个元素都是两个字节长。可以说: x = [9000 , 5000 , 2000 , 400] 这个想法是将每个元素拆分为 MSB 和 LSB 并将其存储在
GtkTextView 大小
如何设置 GtKTextView 的大小？我想我不能使用 gtk_widget_set_usize。最佳答案您不能直接控制小部件的大小，而是由其容器完成。您可以使用 gtk_widget_set_
具有函数的结构的c++大小
这个问题在这里已经有了答案: c++ sizeof() of a class with functions (7 个答案) 关闭 5 年前。结果是 12。 foobar 函数存储在内存中的什么位置
image - 为什么图像序列比源视频大(大小)？
当我在 ffmpeg(或任何其他程序)中使用这样的命令时: ffmpeg -i input.mp4 image%d.jpg 所有图像的组合文件大小总是比视频本身大。我尝试减少每秒帧数、降低压缩设置、模
clojurescript 高级编译 - 大小
我是 clojurescript 的新手。高级编译后出现“77 KB”的javascript文件是否正常？我有一个 clojurescript 文件: 我正在使用 leinigen: lein c
Qt QPixmap 大小
我想要一个 QPixmap尺寸为 50 x 50。我试过 : QPixmap watermark(QSize(50,50)); watermark.load(":/icoMenu/preparati
卷积层的 tensorflow 大小
我正在尝试从一篇研究论文中重新创建一个 cnn，但我对深度学习还是个新手。我得到了一个大小为 32x32x7 的 3d 补丁。我首先想执行一个大小为 3x3 的卷积，具有 32 个特征和步幅为 2。
iPhone如何在旋转设备时正确调整 View 大小
我一直在尝试调整 View Controller 内的 View 大小，但到目前为止没有运气。基本上，我的 View 最底部有一个按钮，当方向从纵向更改为横向时，该按钮不再可见，因为它现在太靠下了。
javascript - 上传前检查图像尺寸/大小
如何使用此功能检查图像的尺寸？我只是想在上传之前检查一下... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this);
二叉搜索树上的 JavaScript 大小
我用 C++ 完成了这个，因为你可以通过引用传递参数。我无法弄清楚如何在 JavaScript 中执行此操作。我的代码需要更改什么？我的输出是1 this.sizeOfBst = function()

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

_Layout.cshtml

CSS