html - 移动到不同页面时页脚闪烁
问题描述
我有以下标记在主布局中显示固定页脚:
<nav class="main-footer navbar navbar-expand navbar-white navbar-light" style="height: 40px;">
<ul class="navbar-nav">
<li class="nav-item d-none d-sm-inline-block">
<a href="" class="nav-link"><strong>MySite</strong></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="PrivacyPolicy" class="nav-link">Privacy Policy</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="Terms" class="nav-link">Terms</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Your IP: @(ipAddress)
</li>
</ul>
</nav>
使用此标记,页脚在页面之间移动时会不断闪烁。
我以前使用的footer
标签效果很好,但我更改为上面的代码以nav
在标题中添加项目。
有没有办法解决这个问题?
解决方案
也许问题与nav
' 高度属性有关。如果要设置页脚的高度,请尝试在元素中设置line-height
属性。footer
代码如下:
@{
var ipAddress = "";
if (ViewBag.ipAddress != null)
{
ipAddress = ViewBag.ipAddress;
}
else
{
ipAddress = "Null";
}
}
<footer class="border-top footer text-muted" style="line-height:40px !important;" >
<nav class="main-footer navbar navbar-expand navbar-white navbar-light" >
<ul class="navbar-nav flex-grow-1">
<li class="nav-item d-none d-sm-inline-block">
<a href="" class="nav-link"><strong>MySite</strong></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="PrivacyPolicy" class="nav-link">Privacy Policy</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="Terms" class="nav-link">Terms</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Your IP: @(ipAddress)
</li>
</ul>
</nav>
</footer>
然后,结果如下:
更新:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">WebApplication1</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
@{
var ipAddress = "";
if (ViewBag.ipAddress != null)
{
ipAddress = ViewBag.ipAddress;
}
else
{
ipAddress = "Null";
}
}
<footer class="border-top footer text-muted" style="line-height:40px !important;" >
<nav class="main-footer navbar navbar-expand navbar-white navbar-light" >
<ul class="navbar-nav flex-grow-1">
<li class="nav-item d-none d-sm-inline-block">
<a href="" class="nav-link"><strong>MySite</strong></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="About" class="nav-link">About</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="PrivacyPolicy" class="nav-link">Privacy Policy</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a asp-area="" asp-controller="Home" asp-action="Terms" class="nav-link">Terms</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Your IP: @(ipAddress)
</li>
</ul>
</nav>
</footer>
@*<footer class="border-top footer text-muted">
<div class="container">
© 2021 - WebApplication1 - <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>
推荐阅读
- java - Docker-compose 和 Java
- google-sheets - Google 表格部分匹配单元格
- python - tensorflow ValueError:形状不兼容
- typescript - 必需的类型删除了函数类型的知识
- sql-server - T-SQL WHERE IN子句:一个参数包含多个INT值会返回类型转换错误
- javascript - addEventListener 不是函数“Javascript”
- python - 试图将对象添加到文本文件中
- python - 在 cloudflare 中添加 8081 等新端口
- java - Android String.contains 最多只能使用大约 154 个字符
- flutter - 两个不同页面上的两个 ChangeNotifierProvider