使用 jumbotron 时，RenderBody() 与 _Layout.cshtml 重叠
Posted
技术标签:
【中文标题】使用 jumbotron 时，RenderBody() 与 _Layout.cshtml 重叠【英文标题】：RenderBody() overlaps with _Layout.cshtml when using jumbotron 【发布时间】：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代码 【参考方案1】：阅读Fixed to Top 上的引导文档。
需要身体填充
固定的导航栏将覆盖您的其他 内容，除非您在 .试试你的 自己的价值观或使用我们下面的sn-p。提示：默认情况下，导航栏是 50 像素高。
body padding-top: 70px;确保在核心 Bootstrap CSS 之后包含它。
【讨论】：
以上是关于使用 jumbotron 时，RenderBody() 与 _Layout.cshtml 重叠的主要内容，如果未能解决你的问题，请参考以下文章
如何将视图中的“RenderBody”和“RenderBody”内容作为单独的“标题”和“页脚”文件提供？
MVC4 @RenderBody@RenderSection@RenderPageHtml.RenderPartialHtml.RenderAction的作用和区别