引導導航欄不工作的移動

-3

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>馬面的青春部落格</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!--爲了確保適當的繪製和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標籤。--> 
 
    <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"> <!--插入bootstarp--> 
 
    <link href="CSS/main.css" rel="stylesheet" type="text/css" media="all"> 
 
    <script type="text/javascript" src="JavaScript/jquery-1.11.3.min.js"></script> 
 
    <script type="text/javascript" src="JavaScript/bootstrap.min.js"></script><!--引入js文件--> 
 
    <script type="text/javascript" src="JavaScript/main.js"></script> 
 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-default" > 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
       <span class="sr-only"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="index.html">馬面的青春部落格</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1"> 
 

 
      <ul class="nav navbar-nav"> 
 
       <li><a href="Blog.html">文章</a></li> 
 
       <li><a href="Photo.html">相冊</a></li> 
 
       <li><a href="Person.html">個人簡介</a></li> 
 
       <li><a href="Contact.html">聯繫方式</a></li> 
 
       <li><img class="navimg" src="image/twitter.png" ></li> 
 
       <li><img class="navimg" src="image/Github.png" ></li> 
 
       <li><img class="navimg" src="image/gmail.png" ></li> 
 

 
      </ul> 
 

 
     </div> 
 

 
</nav> 
 
    
 
</body> 
 
</html>

示例：markmamian.github.io導航欄是不工作的移動。

來源

2015-12-21 mamian

嘗試更新你的問題是更容易理解。 –

引導程序網站的完整響應導航欄的代碼。如果您要從中刪除部件，請在每一步後重新刷新，以查看您出錯的位置。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

來源

2015-12-21 15:17:29

嘗試的基本結構建造的巨型網站

http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/

來源

2015-12-31 10:26:50

引導導航欄不工作的移動

回答

相關問題