Bootstrap 4 固定顶部导航栏显示折叠并隐藏内容

Question

我已经尝试过很多线程对SO，也这一个，但不能把它做。我正在尝试使用 bootstrap 4 在顶部制作一个固定的导航栏。但看起来导航栏正在向顶部移动。我也尝试css按照官方文档的建议添加填充，但内容不是固定的导航栏。这是默认的导航栏图像

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

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

有什么帮助吗？

Answer 1

您需要使用navbar-expand该类使导航栏显示，否则它将被折叠（因为移动是默认状态）。

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>

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

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

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

注意：使用fixed-topNavbar 时，Bootstrap 建议在 body 顶部添加 padding 以防止内容被 Navbar 隐藏。

body {
    padding-top: 56px;
}

演示