RenderBody() перекрывается с _Layout.cshtml при использовании jumbotron

Я новичок в ASP.Net, я пытался создать простую страницу входа. Макет страницы имеет джумботрон. Но мои элементы управления входом в систему перекрываются с помощью 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>
}

Это результат я получаю скриншот

Источник

1 ответ

Решение

Прочитайте документацию по Bootstrap на Fixed to Top.

Обивка тела требуется

Фиксированная панель навигации будет перекрывать ваш другой контент, если вы не добавите отступы в верхней части. Попробуйте свои собственные значения или используйте наш фрагмент ниже. Совет: по умолчанию навигационная панель имеет высоту 50 пикселей.

body { padding-top: 70px; }

Обязательно включите это после основного Bootstrap CSS.

Источник
Другие вопросы по тегам