1

我是 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>
}

这是我得到截图的结果

4

1 回答 1

0

阅读Fixed to Top上的 Bootstrap 文档。

需要身体填充物

固定导航栏将覆盖您的其他内容，除非您在 . 尝试您自己的价值观或使用我们下面的代码段。提示：默认情况下，导航栏的高度为 50px。

body { padding-top: 70px; }

确保在核心 Bootstrap CSS 之后包含它。

于 2016-03-27T03:50:22.447 回答