使用 jumbotron 时，RenderBody() 与 _Layout.cshtml 重叠答案

【问题标题】：RenderBody() overlaps with _Layout.cshtml when using jumbotron使用 jumbotron 时，RenderBody() 与 _Layout.cshtml 重叠
【发布时间】：2016-07-14 14:12:34
【问题描述】：

我是 ASP.Net 的新手，我尝试创建一个简单的登录页面。布局页面有一个jumbotron。但是我的登录控件与 jumbotron 重叠。

感谢您的帮助

_Layout.cshtml - 文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - Title</title>
        <link href="~/Content/Site.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.css" rel="stylesheet" />  
        <link href="~/css/Main.scss" rel="stylesheet" type="text/css"/>  
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="container-fluid">
               <div class="jumbotron">
                  <h2>Welcome to Application</h2>
                </div>
            </div>
        </div>
        <div id ="main" class="col-lg-8">
            @RenderBody()
        </div>
   </body> 
</html>

Login.cshtml - 登录视图

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Login";
}


@using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    if (@ViewBag.LoginErrorMsg != null)
    {
        <div class="form-group has-error">
            @ViewBag.LoginErrorMsg
        </div>
    }

    <div class="container body-content">
        <div class="container-fluid">
            <div class="col-md-4"></div>

            <div class="col-md-4">
                <div class="form-group">
                    @Html.LabelFor(a => a.email, new { @class = "control-label" })
                    @Html.TextBoxFor(a => a.email, new { @class = "form-control" })
                    @Html.ValidationMessageFor(a => a.email)
                </div>
                <div class="form-group">
                    @Html.LabelFor(a => a.Password, new { @class = "control-label" })
                    @Html.TextBoxFor(a => a.Password, new { @class = "form-control" })
                    @Html.ValidationMessageFor(a => a.Password)
                </div>
                <button type="submit" class="btn btn-default">Login</button>
            </div>

            <div class="col-md-4"></div>
        </div>
    </div>
}

这是我得到的结果screenshot

【问题讨论】：

我猜你可能需要玩一下css代码

标签： asp.net-mvc bootstrap-modal render-html

【解决方案1】：

阅读Fixed to Top 上的引导文档。

需要身体填充

固定的导航栏将覆盖您的其他内容，除非您在 .试试你的自己的价值观或使用我们下面的sn-p。提示：默认情况下，导航栏是 50 像素高。
body { padding-top: 70px; } 
确保在核心 Bootstrap CSS 之后包含它。

【讨论】：