所以我在网上关注一个教程(http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/)并完全遵循代码,但出于某种原因,我的导航栏没有显示出来它应该是.我的朋友(对web开发人员更有经验)快速查看了代码,但无法弄清楚出了什么问题.所以我想我会在这里发布我的问题.
我还会告诉你我的工作目录(以防万一你想知道这些文件是否都在同一个目录中):
这是代码,以防您想自己尝试
My bootstrap
我想你正在使用最新的Bootstrap.
你必须添加navbar-default
到你的<div class="navbar">
和navbar-nav
你的<ul class="nav">
.
这给你以下标记.
<div class="container"> <h1><a href="#">Bootstrap Site</a></h1> <div class="navbar navbar-default"> <div class="navbar-inner"> <div class="container"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>
工作实例
对于未来的问题,请先尝试阅读官方的Bootstrap文档,然后再询问此处.他们解释了一切非常详细.
BT Navbar
我想您的问题是,sitepoint教程使用的是较旧的Bootstrap版本,而不是您下载和使用的版本.
我在使用bootstrap v4时遇到了类似的问题。先前的答案代码对我来说效果很好,但只是想澄清一下,使垂直导航栏变为水平的部分是在主div标签中使用navbar-expand-lg。
<nav class="navbar navbar-expand-lg">
根据屏幕大小的偏好设置,将lg更改为其他大小(md,sm或xs)也很有帮助。
希望这可以帮助