为什么bootstrap sticky header下的razor页面渲染在Asp.net Core MVC
Why is the razor page rendering under the bootstrap sticky header in Asp.net Core MVC
我正在尝试学习 Asp.Net 核心 MVC，使用 .net 5 和 pre-built，脚手架剃刀身份页面。当我单击登录或从粘性 header 注册时，我得到了这个渲染结果。如何格式化（razor）登录页面以在粘性 header 下方开始？粘性 header 来自 bootstrap 主题，该主题在脚手架页面之前运行良好。我没有触及 css 代码，因为我不知道我在那里做什么。
Razor page under sticky header
登录页面如下所示...
@page
@model LoginModel
@{
ViewData["Title"] = "Log in";
}
<div mt-3>
<h1>@ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h4>Use another service to log in.</h4>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
</div>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
这是_布局代码
<!DOCTYPE html>
<!--Home Layout Page-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>@ViewData["Title"] - SRP</title>
<link href="~/css/style-liberty.css" rel="stylesheet" />
<a href="~/fonts/fontawesome-webfont.eot"></a>
<a href="~/fonts/fontawesome-webfont.ttf"></a>
<a href="~/fonts/fontawesome-webfont.woff"></a>
<a href="~/fonts/fontawesome-webfont.woff2"></a>
<a href="~/fonts/FontAwesome.otf"></a>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/jquery.countup.js"></script>
<script src="~/js/jquery.magnific-popup.min.js"></script>
<script src="~/js/jquery.waypoints.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/theme-change.js"></script>
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand" asp-area="" asp-controller="Main" asp-action="Index">
<span>THIS IS THE HOME PAGE</span>
</a>
</h1>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa icon-expand fa-bars"></span>
<span class="fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Services">Services</a>
</li>
@*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="blog.html" class="drop-text">Blog Posts</a>
<a class="dropdown-item" href="blog-single.html" class="drop-text">
Blog
Single post
</a>
</div>
</li>*@
@*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="error.html" class="drop-text">404</a>
<a class="dropdown-item" href="contact.html" class="drop-text">Contact</a>
<a class="dropdown-item" href="landing-single.html" class="drop-text">Landing page</a>
</div>
</li>*@
</ul>
<ul class="navbar-nav search-right mt-lg-0 mt-2">
<li class="nav-item mr-3" title="Search">
<a href="#search" class="btn search-search">
<span class="fa fa-search" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary d-none d-lg-block btn-style mr-2" asp-area="" asp-controller="Home" asp-action="ContactUs">Contact Us</a>
@*<a href="contact.html" class="btn btn-primary d-none d-lg-block btn-style mr-2">
Contact Us*@
</a>
</li>
</ul>
<partial name="_LoginPartial" />
<!-- //toggle switch for light and dark theme -->
<!-- search popup -->
<div id="search" class="pop-overlay">
<div class="popup">
<form action="#" method="GET" class="d-sm-flex">
<input type="search" placeholder="Search.." name="search" required="required" autofocus>
<button type="submit">Search</button>
<a class="close" href="#url">×</a>
</form>
</div>
</div>
<!-- /search popup -->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<span class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</span>
</label>
</div>
</nav>
</div>
</nav>
</div>
</header>
<!--/header-->
<div class="container-fluid bod-2">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<!-- footer-66 -->
<footer class="w3l-footer-66">
<section class="footer-inner-main">
<div class="footer-hny-grids py-5">
<div class="container py-lg-4">
<div class="text-txt">
<div class="row newsletter-grids-footer">
<div class="col-lg-6 newsletter-text pr-lg-5">
<h3 class="hny-title two">Newsletter</h3>
<h4>
Sign up for our monthly newsletter to get the latest news, volunteer opportunities,
</h4>
</div>
<div class="col-lg-6 newsletter-right">
<form action="#" method="post" class="footer-newsletter">
<input type="email" name="email" class="form-input" placeholder="Enter your email..">
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</div>
<div class="right-side">
<div class="row sub-columns">
<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
<h2>
<a class="navbar-brand" href="index.html">
<span>Capture & Response</span>
</a>
</h2>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<p class="pr-lg-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur hic odio voluptatem tenetur consequatur.Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</p>
<div class="columns-2">
<ul class="social">
<li>
<a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
</li>
<li>
<a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
</li>
<li>
<a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
</li>
<li>
<a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
</li>
<li>
<a href="#github"><span class="fa fa-github" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Our Services</h6>
<div class="mid-footer-gd sub-two-right">
<ul>
<li>
<a href="about.html"><span class="fa fa-angle-double-right mr-2"></span> About</a>
</li>
<li>
<a href="services.html"><span class="fa fa-angle-double-right mr-2"></span> Services</a>
</li>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span> Car Wash</a>
</li>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span>Electrical system</a>
</li>
</ul>
<ul>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span>Tire and wheel</a>
</li>
<li>
<a href="#">
<span class="fa fa-angle-double-right mr-2"></span>Help
Orphan
</a>
</li>
<li><a href="#support"><span class="fa fa-angle-double-right mr-2"></span>Career</a></li>
<li>
<a href="contact.html"><span class="fa fa-angle-double-right mr-2"></span>Contact US</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Contact Info</h6>
<div class="sub-contact-info">
<p>Address: 8436 Jasmine Parkway, Mountain View, CA 84043, United States.</p>
<p class="my-3">Phone: <strong><a href="tel:+24160033999">+24 1600-33-999</a></strong></p>
<p>E-mail:<strong> <a href="mailto:info@example.com">info@example.com</a></strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="below-section">
<div class="container">
<div class="copyright-footer">
<div class="columns text-lg-left">
<p>© 2020 Capature & Response. All rights reserved.</p>
</div>
<ul class="columns text-lg-right">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>|</li>
<li>
<a href="#">Terms Of Use</a>
</li>
</ul>
</div>
</div>
</div>
<!-- copyright -->
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
<span class="fa fa-long-arrow-up" aria-hidden="true"></span>
</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- /move top -->
</section>
</footer>
<!--//footer-66 -->
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - SRP01 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
这里是fixed-top的样式：
具有 position: fixed; 的元素不会在页面中通常应该存在的空隙中留下空隙 located.So 这就是您获得呈现结果的原因。
如果您想要将（razor）登录页面格式化为在粘性 header 下方开始，请尝试在您的 _Layout <header id="site-header" class="fixed-top">.[=19 中删除 class="fixed-top" =]
如果你不想去掉fixed-top。也可以在_Layout中使用如下样式覆盖.fixed-top中的position: fixed;：
<style>
.fixed-top {
position:initial;
}
</style>
我正在尝试学习 Asp.Net 核心 MVC，使用 .net 5 和 pre-built，脚手架剃刀身份页面。当我单击登录或从粘性 header 注册时，我得到了这个渲染结果。如何格式化（razor）登录页面以在粘性 header 下方开始？粘性 header 来自 bootstrap 主题，该主题在脚手架页面之前运行良好。我没有触及 css 代码，因为我不知道我在那里做什么。
Razor page under sticky header
登录页面如下所示...
@page
@model LoginModel
@{
ViewData["Title"] = "Log in";
}
<div mt-3>
<h1>@ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
@Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h4>Use another service to log in.</h4>
<hr />
@{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
@foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
</div>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
这是_布局代码
<!DOCTYPE html>
<!--Home Layout Page-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>@ViewData["Title"] - SRP</title>
<link href="~/css/style-liberty.css" rel="stylesheet" />
<a href="~/fonts/fontawesome-webfont.eot"></a>
<a href="~/fonts/fontawesome-webfont.ttf"></a>
<a href="~/fonts/fontawesome-webfont.woff"></a>
<a href="~/fonts/fontawesome-webfont.woff2"></a>
<a href="~/fonts/FontAwesome.otf"></a>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/jquery.countup.js"></script>
<script src="~/js/jquery.magnific-popup.min.js"></script>
<script src="~/js/jquery.waypoints.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/theme-change.js"></script>
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand" asp-area="" asp-controller="Main" asp-action="Index">
<span>THIS IS THE HOME PAGE</span>
</a>
</h1>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa icon-expand fa-bars"></span>
<span class="fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Services">Services</a>
</li>
@*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="blog.html" class="drop-text">Blog Posts</a>
<a class="dropdown-item" href="blog-single.html" class="drop-text">
Blog
Single post
</a>
</div>
</li>*@
@*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="error.html" class="drop-text">404</a>
<a class="dropdown-item" href="contact.html" class="drop-text">Contact</a>
<a class="dropdown-item" href="landing-single.html" class="drop-text">Landing page</a>
</div>
</li>*@
</ul>
<ul class="navbar-nav search-right mt-lg-0 mt-2">
<li class="nav-item mr-3" title="Search">
<a href="#search" class="btn search-search">
<span class="fa fa-search" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary d-none d-lg-block btn-style mr-2" asp-area="" asp-controller="Home" asp-action="ContactUs">Contact Us</a>
@*<a href="contact.html" class="btn btn-primary d-none d-lg-block btn-style mr-2">
Contact Us*@
</a>
</li>
</ul>
<partial name="_LoginPartial" />
<!-- //toggle switch for light and dark theme -->
<!-- search popup -->
<div id="search" class="pop-overlay">
<div class="popup">
<form action="#" method="GET" class="d-sm-flex">
<input type="search" placeholder="Search.." name="search" required="required" autofocus>
<button type="submit">Search</button>
<a class="close" href="#url">×</a>
</form>
</div>
</div>
<!-- /search popup -->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<span class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</span>
</label>
</div>
</nav>
</div>
</nav>
</div>
</header>
<!--/header-->
<div class="container-fluid bod-2">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<!-- footer-66 -->
<footer class="w3l-footer-66">
<section class="footer-inner-main">
<div class="footer-hny-grids py-5">
<div class="container py-lg-4">
<div class="text-txt">
<div class="row newsletter-grids-footer">
<div class="col-lg-6 newsletter-text pr-lg-5">
<h3 class="hny-title two">Newsletter</h3>
<h4>
Sign up for our monthly newsletter to get the latest news, volunteer opportunities,
</h4>
</div>
<div class="col-lg-6 newsletter-right">
<form action="#" method="post" class="footer-newsletter">
<input type="email" name="email" class="form-input" placeholder="Enter your email..">
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</div>
<div class="right-side">
<div class="row sub-columns">
<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
<h2>
<a class="navbar-brand" href="index.html">
<span>Capture & Response</span>
</a>
</h2>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<p class="pr-lg-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur hic odio voluptatem tenetur consequatur.Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</p>
<div class="columns-2">
<ul class="social">
<li>
<a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
</li>
<li>
<a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
</li>
<li>
<a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
</li>
<li>
<a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
</li>
<li>
<a href="#github"><span class="fa fa-github" aria-hidden="true"></span></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Our Services</h6>
<div class="mid-footer-gd sub-two-right">
<ul>
<li>
<a href="about.html"><span class="fa fa-angle-double-right mr-2"></span> About</a>
</li>
<li>
<a href="services.html"><span class="fa fa-angle-double-right mr-2"></span> Services</a>
</li>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span> Car Wash</a>
</li>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span>Electrical system</a>
</li>
</ul>
<ul>
<li>
<a href="#"><span class="fa fa-angle-double-right mr-2"></span>Tire and wheel</a>
</li>
<li>
<a href="#">
<span class="fa fa-angle-double-right mr-2"></span>Help
Orphan
</a>
</li>
<li><a href="#support"><span class="fa fa-angle-double-right mr-2"></span>Career</a></li>
<li>
<a href="contact.html"><span class="fa fa-angle-double-right mr-2"></span>Contact US</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Contact Info</h6>
<div class="sub-contact-info">
<p>Address: 8436 Jasmine Parkway, Mountain View, CA 84043, United States.</p>
<p class="my-3">Phone: <strong><a href="tel:+24160033999">+24 1600-33-999</a></strong></p>
<p>E-mail:<strong> <a href="mailto:info@example.com">info@example.com</a></strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="below-section">
<div class="container">
<div class="copyright-footer">
<div class="columns text-lg-left">
<p>© 2020 Capature & Response. All rights reserved.</p>
</div>
<ul class="columns text-lg-right">
<li>
<a href="#">Privacy Policy</a>
</li>
<li>|</li>
<li>
<a href="#">Terms Of Use</a>
</li>
</ul>
</div>
</div>
</div>
<!-- copyright -->
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
<span class="fa fa-long-arrow-up" aria-hidden="true"></span>
</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- /move top -->
</section>
</footer>
<!--//footer-66 -->
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - SRP01 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
这里是fixed-top的样式：
具有 position: fixed; 的元素不会在页面中通常应该存在的空隙中留下空隙 located.So 这就是您获得呈现结果的原因。
如果您想要将（razor）登录页面格式化为在粘性 header 下方开始，请尝试在您的 _Layout <header id="site-header" class="fixed-top">.[=19 中删除 class="fixed-top" =]
如果你不想去掉fixed-top。也可以在_Layout中使用如下样式覆盖.fixed-top中的position: fixed;：
<style>
.fixed-top {
position:initial;
}
</style>