为什么我的bootstrap页面效果不对?

发布于 2022-09-04 03:33:43 字数 2089 浏览 10 评论 0

以下是代码,按照教程效果,导航在缩小时应该在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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

逆蝶 2022-09-11 03:33:44

把你的 container-header 改成 navbar-header

图片描述

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文