html - 导航栏元素彼此重叠放置，而不是相邻放置

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

最佳答案

将您的示例粘贴到bootply中似乎可以正常工作。我会检查您的脚本和样式表文件是否正确包含在您的页面中。

- 编辑 -

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

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

关于html - 导航栏元素彼此重叠放置，而不是相邻放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47271439/