twitter-bootstrap Bootstrap 导航栏重叠正文内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41978866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap navbar overlapping body content
提问by touseefbsb
I am having some issues with my Bootstrap navbar.
我的 Bootstrap 导航栏出现了一些问题。
I have a lot of tabs in the navbar so the header gets on separate line and the tabs get on 2nd line which doesn't look good.
because navbar takes 2 line so it hides some content on my page, for example there is a heading above line "Please select cluster avg file...." in the attached image but you cant see it because navbar is overlapping and hiding it.
How can I fix this issue? I want the navbar to show only limited tabs , as possible in one line of navbar and hide other in the hamburger menu. So that it doesn't hide my body content and looks good as well.
我在导航栏中有很多选项卡，因此标题位于单独的行上，而选项卡位于第二行，这看起来不太好。
因为导航栏需要 2 行所以它隐藏了我页面上的一些内容，例如在附加图像中“请选择集群平均文件...”行上方有一个标题，但您看不到它，因为导航栏重叠并隐藏它。
我该如何解决这个问题？我希望导航栏只显示有限的选项卡，尽可能在导航栏中的一行中显示，并在汉堡菜单中隐藏其他选项卡。这样它就不会隐藏我的身体内容并且看起来也不错。
P.S: these problem don't occur when I resize window to mobile view, because hamburger menu appears.
PS：当我将窗口大小调整为移动视图时不会出现这些问题，因为会出现汉堡菜单。
Full Window
全窗
Mobile View
移动视图
and the code for navbar is default with ASP.NET Core web application only thing I changed was its theme to "inverse"
导航栏的代码是 ASP.NET Core Web 应用程序的默认代码，我唯一改变的是它的主题为“反向”
Here's the code
这是代码
<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>
回答by Banzay
Acoording to bootstrap navbar-fixed-topdocs:
根据引导navbar-fixed-top文档：
Body padding required
需要身体填充
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
固定导航栏将覆盖您的其他内容，除非您在 . 尝试您自己的价值观或使用我们下面的代码片段。提示：默认情况下，导航栏高 50 像素。
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
确保在核心 Bootstrap CSS 之后包含它。
I think if it takes two lines on non-mobile viewport, you can set
我认为如果在非移动视口上需要两行，您可以设置
@media screen and (min-width: 768px) {
body { padding-top: 100px; }
}
