Bootstrap导航栏重叠体内容

Question

我的Bootstrap导航栏存在一些问题.

1. 我在导航栏中有很多选项卡,因此标题位于单独的行上,标签位于第二行,这看起来不太好.

2. 因为导航栏需要2行,所以它会在我的页面上隐藏一些内容,例如在附加图像中有一个标题"请选择群集平均文件...."但是你看不到它,因为导航栏重叠并隐藏它.

3. 我该如何解决这个问题？我希望导航栏只显示有限的标签,尽可能在一行导航栏中显示,并在汉堡菜单中隐藏其他标签.因此它不会隐藏我的身体内容并且看起来也很好.

PS:当我将窗口调整为移动视图时,不会出现这些问题,因为会出现汉堡包菜单.

全窗口

移动视图

导航栏的代码默认使用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>&copy; 2016 - ChromSACT</p>
    </footer>
</div>

Answer 1

根据bootstrap navbar-fixed-top文档:

需要身体填充

固定的导航栏将覆盖您的其他内容,除非您添加填充到顶部.尝试自己的价值观或使用下面的代码段.提示:默认情况下,导航栏高50像素.

body { padding-top: 70px; }

确保在核心Bootstrap CSS之后包含它.

我想如果非移动视口需要两行,你可以设置

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}