Bootstrap 4固定的顶部导航栏显示折叠并隐藏内容 [英] Bootstrap 4 Fixed top navbar shows collapsed and hides content

问题描述

我已经在 SO 上尝试了很多线程，并且此一个，但无法完成.我正在尝试使用Bootstrap 4在顶部制作一个固定的导航栏.但是看起来导航栏正在向顶部移动.我也尝试过按照官方文档的建议在css中添加填充，但是内容正在转移而不是固定的导航栏. 这是默认的导航栏图像

I have already tried lot of threads on SO and also this one but couldn't get it done. I am trying to make one fixed navbar on top with bootstrap 4. But looks like the navbar is shifting towards top. I have tried by adding padding in css as suggested by official doc also but the content is shifting not the fixed navabar. Here is the default navbar image

这是我得到的固定导航栏图像 我不知道我在这里缺少什么.这是代码

And this is the fixed navbar image I am getting I don't know what I am missing in this. Here is the code

<nav class="navbar fixed-top navbar-light bg-light">
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item-active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </nav>

对此有任何帮助吗?

推荐答案

您需要使用 navbar-expand 类来显示导航栏，否则它将被折叠(因为移动是默认设置)状态).

You need to use the navbar-expand class to make the navbar show, otherwise it will be collapsed (since mobile is the default state).

https://www.codeply.com/go/HQbDGFwvxp

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item-active">
                <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/product">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/career">Career</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

如果您不想使用移动折叠式菜单，只需删除导航栏折叠...

If you don't intent to use the mobile collapsible menu, just remove the navbar-collapse...

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
    <ul class="navbar-nav">
        <li class="nav-item-active">
            <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/product">Products</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/services">Services</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/career">Career</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/contact">Contact Us</a>
        </li>
    </ul>
</nav>

类似问题
引导Navbar列表项/链接未显示
在引导程序4中禁用响应式导航栏

Similar questions
Bootstrap Navbar list items/links not showing
Disable responsive navbar in bootstrap 4

注意:使用fixed-top导航栏时， Bootstrap建议在主体顶部添加填充，以防止导航栏隐藏内容.

Note: When using the fixed-top Navbar, Bootstrap recommends adding padding to the top of the body to prevent content from being hidden by the Navbar..

body {
    padding-top: 56px;
}

演示

这篇关于Bootstrap 4固定的顶部导航栏显示折叠并隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！