Question

创建<nav class="navbar navbar-default">时，Navbar项目位于彼此之上，而它们彼此相邻。我已按照W3 Schools上的说明进行操作。就我而言，我的代码是正确的。

<div class="container-fluid">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">BRAND</a>
            </div>



            <ul class="nav navbar-nav">
                <li><a href="#">about</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>
    </nav>
</div>

这是我的Codepen

Answer 1

将您的示例粘贴到bootply似乎工作正常。我检查一下你的脚本＆amp;样式表文件正确包含在您的页面中。

- 编辑 -

在减少浏览器宽度与较小的媒体查询（响应模式）之一匹配后，我确实看到了问题。您正在使用的代码工作正常，但是基于一个不完整的示例，该示例不会像Bootstrap导航栏通常那样折叠到汉堡包/三栏图标。

您最好直接查看Bootstrap网站上的代码示例：https://getbootstrap.com/docs/3.3/components/#navbar

Navbar项目位于彼此之上而不是旁边

1 个答案: