Bootstrap 导航栏重叠正文内容
Posted
技术标签:
【中文标题】Bootstrap 导航栏重叠正文内容【英文标题】：Bootstrap navbar overlapping body content 【发布时间】：2017-06-18 03:30:24 【问题描述】：我的 Bootstrap 导航栏有一些问题。
我在导航栏中有很多选项卡，因此标题位于单独的行，而选项卡位于第二行，看起来不太好。
因为 navbar 占用 2 行，所以它隐藏了我页面上的一些内容，例如，附加图像中的行上方有一个标题“请选择集群 avg 文件....”，但您看不到它，因为 navbar重叠并隐藏它。
如何解决此问题？我希望导航栏仅显示有限的选项卡，尽可能在一行导航栏中显示，并在汉堡菜单中隐藏其他选项卡。这样它就不会隐藏我的身体内容并且看起来也不错。
P.S：当我将窗口调整为移动视图时，不会出现这些问题，因为出现了汉堡菜单。
全窗口
移动视图
并且导航栏的代码是 ASP.NET Core Web 应用程序的默认代码，我唯一更改的是它的主题为“反向”
这是代码
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">ChromSACT</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="Index" class="aa"><span class="glyphicon glyphicon-home" style="margin-right:6px;"></span>Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Cell">Input</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="CellResult">Marks</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="CellResultRegions">Regions</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="ClusterBits">Cluster Bits</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="RegionsMatrix">Regions Matrix</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="MarksMatrix">Marks Matrix</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Compare">Compare</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About"><span class="glyphicon glyphicon-alert" style="margin-right:6px;"></span>About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact"><span class="glyphicon glyphicon-envelope" style="margin-right:6px;"></span>Contact</a></li>
<li><button data-toggle="modal" data-target="#myModal" class="btn navbar-btn btn-group-sm"><span class="glyphicon glyphicon-info-sign" style="margin-right:6px;"></span>Instructions</button></li>
</ul>
</div>
</div>
</div>
<div class="container body-content" >
@RenderBody()
<hr />
<footer>
<p>© 2016 - ChromSACT</p>
</footer>
</div>
【问题讨论】：
【参考方案1】：根据引导 navbar-fixed-top 文档：
###需要身体填充
固定的导航栏将覆盖您的其他内容，除非您添加 填充到
<body>的顶部。尝试您自己的价值观或使用我们的 sn-p 下面。提示：默认情况下，导航栏的高度为 50px。
body padding-top: 70px;
确保在核心 Bootstrap CSS 之后包含它。
我认为如果在非移动视口上需要两行，你可以设置
@media screen and (min-width: 768px)
body padding-top: 100px;
【讨论】：
非常感谢媒体屏幕解决方案完全为我工作:) 您能否举例说明为什么需要媒体解决方案？我找不到 padding-top 不起作用的情况。【参考方案2】：我在许多不同主题和样式的引导网站上工作。在更改样式以满足客户要求时保持导航栏填充是一种痛苦。我为 Bootstrap 4 提出了这个解决方案。您可以在导入主题和引导程序后将其放入 scss 文件中。
body
padding-top: $navbar-padding-y + $nav-link-height + $navbar-padding-y;
【讨论】：
以上是关于Bootstrap 导航栏重叠正文内容的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 导航栏不会在 Angular 4 中折叠