为什么我的bootstrap页面效果不对?
以下是代码,按照教程效果,导航在缩小时应该在logo的下面,为什么却跑到了右边?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale=no">
<title>我的个人网页</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
</head>
<body>
<!---->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-header">
<a href="#" class="navbar-brand" style="padding: 0"><img src="/img/logon.gif" alt=""></a>
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>
<script src="/js/jquery1.11.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>
![图片描述][1]
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
把你的
container-header
改成navbar-header