Bootstrap导航栏重叠内容 [英] Bootstrap navbar overlapping body content

问题描述

我的Bootstrap导航栏出现问题.

I am having some issues with my Bootstrap navbar.

1. 导航栏中的标签很多，因此页眉位于单独的行上，标签位于第二行，看起来不太好.

1. 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.

因为navbar需要2行，所以它隐藏了我的页面上的某些内容，例如，在所附图像中的请选择群集avg文件...."行上方有一个标题，但是您无法看到它，因为navbar重叠并隐藏它.

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.

P.S:当我将窗口调整为移动视图大小时，不会出现这些问题，因为出现了汉堡菜单.

P.S: these problem don't occur when I resize window to mobile view, because hamburger menu appears.

全窗口

移动视图

并且navbar的代码是ASP.NET Core Web应用程序的默认代码，我唯一更改的是将其主题设置为反"

and the code for navbar is default with ASP.NET Core web application only thing I changed was its theme to "inverse"

这是代码

<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>

推荐答案

根据引导 navbar-fixed-top 文档:

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

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.

body { padding-top: 70px; }

请确保在核心Bootstrap CSS之后添加此内容.

Make sure to include this after the core 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; }
}

这篇关于Bootstrap导航栏重叠内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！