Bootstrap Navbar显示为垂直列表......？
Fat*_*ler 9 html css navbar twitter-bootstrap
所以我在网上关注一个教程(http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/)并完全遵循代码,但出于某种原因,我的导航栏没有显示出来它应该是.我的朋友(对web开发人员更有经验)快速查看了代码,但无法弄清楚出了什么问题.所以我想我会在这里发布我的问题.
我还会告诉你我的工作目录(以防万一你想知道这些文件是否都在同一个目录中):
这是代码,以防您想自己尝试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1><a href="#">Bootstrap Site</a></h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="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>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
div*_*r11 10
如果你希望你的导航栏总是水平的，就像这样：
<nav class="navbar navbar-expand">
使用navbar-expand-lg|md|sm将使它总是在垂直位置的某个点断裂。
我想你正在使用最新的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文档,然后再询问此处.他们解释了一切非常详细.
我想您的问题是,sitepoint教程使用的是较旧的Bootstrap版本,而不是您下载和使用的版本.
- 我仍然使用cdn的bootstrap进行垂直): (5认同)
小智 5
我在使用bootstrap v4时遇到了类似的问题。先前的答案代码对我来说效果很好，但只是想澄清一下，使垂直导航栏变为水平的部分是在主div标签中使用navbar-expand-lg。
<nav class="navbar navbar-expand-lg">
根据屏幕大小的偏好设置，将lg更改为其他大小（md，sm或xs）也很有帮助。
希望这可以帮助
| 归档时间： |
|
| 查看次数： |
16319 次 |
| 最近记录： |