问答详情
源自:3-1 导航及下拉菜单制作

logo显示的位置不对

照着课程写的代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
</style>
  </head>
  <body>
  <nav class="navbar navbar-default" role="navigation">
   <div>
    <div>
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
     <span>Toggle navigation</span><span></span>
     <span></span><span></span>
     <a href="#">现代浏览器博物馆</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
     </ul>
    </div>
   </div>
  </nav>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

  </body>
</html>

 运行后,缩小浏览器logo现代浏览器博物馆显示的位置不对,显示在三条横线的下面,请问是什么原因?如下

图:

http://img.mukewang.com/58e4ee34000195d408190460.jpg



提问者:富百世 2017-04-05 21:18

个回答

  • 语过添情/shd
    2017-04-05 22:07:47

    logo加上样式navbar-brand

  • 语过添情/shd
    2017-04-05 22:06:31

    nav标签加个 navbar-fixed-top 样式,试试