Bootstrap 导航栏重叠 body 内容

Question

我的 Bootstrap 导航栏有一些问题。

我在导航栏中有很多选项卡，所以 header 位于单独的行，而选项卡位于第二行，看起来不太好。
因为导航栏占用 2 行，所以它隐藏了我页面上的一些内容，例如，在附图中 "Please select cluster avg file...." 行上方有一个标题，但你看不到它，因为导航栏重叠并隐藏它。
我该如何解决这个问题？我希望导航栏仅显示有限的选项卡，尽可能在导航栏的一行中显示，并在汉堡菜单中隐藏其他选项卡。这样它就不会隐藏我的 body 内容并且看起来也不错。

P.S：当我将 window 调整为移动视图时不会出现这些问题，因为会出现汉堡菜单。

完整 Window

手机浏览

并且导航栏的代码是 ASP.NET 核心 Web 应用程序的默认代码，我唯一更改的是它的主题 "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>

Answer 1

根据 bootstrap navbar-fixed-top 文档： ###需要正文填充

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

我想如果在 non-mobile viewport 上需要两行，你可以设置

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

Answer 2

我在许多不同的 bootstrap 站点上工作，这些站点具有不同的主题和样式。在更改样式以满足客户要求时保持导航栏填充正确是一件痛苦的事情。我为 Bootstrap 4 提出了这个解决方案。在导入主题和 bootstrap.

之后，您可以将其放入 scss 文件中

body {
    padding-top: $navbar-padding-y + $nav-link-height + $navbar-padding-y;
}

Bootstrap 导航栏重叠 body 内容

Bootstrap navbar overlapping body content

html

css

nav

twitter-bootstrap