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